Angular2 Input（）變量打印undefined

我有兩個組件，Full-Layout（父組件）和Department（子組件）。Angular2 Input（）變量打印undefined

當Full-Layout中的變量綁定並傳遞給子組件時，它總是聲稱它是未定義的。我不知道爲什麼。

full-layout.component.html

<ul class="nav-dropdown-items"> 
 
    <li class="nav-item" *ngFor="let item of dropDownItems"> 
 
     <a #clicked class="nav-link" routerLinkActive="active" [routerLink]="[item.routerLink]"> 
 
      <i class="icon-puzzle"></i>{{item.name}} 
 
      <app-departments [title]="childTitle"></app-departments> 
 
     </a> 
 
    </li> 
 
</ul>

full-layout.component.ts

import { 
 
    Component, 
 
    OnInit 
 
} from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'app-dashboard', 
 
    templateUrl: './full-layout.component.html', 
 
}) 
 
export class FullLayoutComponent implements OnInit { 
 
    public childTitle: string = 'This text is passed to child'; 
 
    constructor() {} 
 
    ngOnInit(): void {} 
 
    
 
    dropDownItems = [{ 
 
     routerLink: '/departments', 
 
     name: 'Artshums' 
 
    }, 
 
    { 
 
     routerLink: '/components/social-buttons', 
 
     name: 'Dentistry' 
 
    }, 
 
    { 
 
     routerLink: '/components/cards', 
 
     name: 'Law' 
 
    }, 
 
    { 
 
     routerLink: '/components/forms', 
 
     name: 'IOPPN' 
 
    }, 
 
    { 
 
     routerLink: '/components/modals', 
 
     name: 'LSM' 
 
    }, 
 
    { 
 
     routerLink: '/departments', 
 
     name: 'NMS' 
 
    }, 
 
    { 
 
     routerLink: '/components/tables', 
 
     name: 'Nursing' 
 
    }, 
 
    { 
 
     routerLink: '/components/tabs', 
 
     name: 'SSPP' 
 
    }, 
 
    { 
 
     routerLink: '/components/tabs', 
 
     name: 'Health' 
 
    } 
 
    ]; 
 
}

departments.component.ts

import {Component, OnInit, Input} from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'app-departments', 
 
    templateUrl: './departments.component.html', 
 
    inputs: ['title'] 
 
}) 
 
export class DepartmentsComponent implements OnInit { 
 
    @Input() 
 
    title:string; 
 

 
    constructor() {} 
 
    ngOnInit() { 
 
    console.log(this.title); 
 
    } 
 
}

departments.module.ts

@NgModule({ 
 
    imports: [ 
 
    DepartmentsRoutingModule, 
 
    CommonModule, 
 
    MaterialModule.forRoot() 
 
    ], 
 
    declarations: [ DepartmentsComponent ] 
 
}) 
 
export class DepartmentsModule {}

app.module.ts

// imports {...}... 
 
// assume necessary imports above 
 

 
@NgModule({ 
 
    imports: [ 
 
    BrowserModule, 
 
    AppRoutingModule, 
 
    DepartmentsModule, 
 
    ], 
 
    declarations: [ 
 
    AppComponent, 
 
    FullLayoutComponent, 
 
    ], 
 
    schemas: [CUSTOM_ELEMENTS_SCHEMA] 
 
    bootstrap: [ AppComponent ] 
 
}) 
 
export class AppModule { }

我得到undefined消息，當我在我的子組件打印標題。

任何想法如何解決這個問題？

謝謝香榭麗舍！

來源

2017-02-17 DingDong

嘗試擺脫裝飾器中的「inputs」屬性並調用控制檯登錄ngOnChanges – chrispy

對不起，我是Angular2的新手，你能否縮寫？ @chrispy – DingDong

您需要在您的類中添加@Input()上述childTitle作爲

export class FullLayoutComponent implements OnInit { 
    @Input() 
    public childTitle: string = 'This text is passed to child';

你需要對你的HTML不是你的孩子組件屬性，並在你的HTML比你父組件的屬性相同的屬性相同的名稱。試試這個：

<app-departments [childTitle]="title"></app-departments>

來源

2017-02-17 15:29:40

我試過了，它仍然打印undefined – DingDong

'Input（）'不工作，我加了'@Input（）'並且仍然不能工作 – DingDong

關於這個問題的任何想法？ – DingDong

您可以使用這些

@Input() title:string = "";

或

ngOnInit() { 
     this.title="" 

    }

或

constructor(){ 
    this.title=""; 
}

來源

2017-02-17 15:33:38 Aravind

無論使用上述任何一種方式，它都不會打印它在母組件中啓動的東西 – DingDong

您可以在團隊查看器中使用嗎？ – Aravind

你好。是的，我可以有你的詳細信息 – DingDong

一個嗨，請刪除此個輸入財產和嘗試

@Component({ 
    selector: 'app-departments', 
    templateUrl: './departments.component.html', 
    **inputs: ['title']** 
})

來源

2017-02-17 15:38:28 NSM

嗨，它沒有解決問題 – DingDong

嗨，我的標題是HTML元素的默認屬性。所以試着給出不同的名字，然後嘗試:-) – NSM

好的，我把它改成了'checking'，它仍然打印出'undefined' – DingDong

試試這個：[標題]爲app-部門attribut應該聽ngFor數：

<ul class="nav-dropdown-items"> 
<li class="nav-item" *ngFor="let item of dropDownItems"> 
    <a class="nav-link" routerLinkActive="active" [routerLink]="item.routerLink"> 
     <i class="icon-puzzle"></i>{{item.name}} 
     <app-departments [title]="item"></app-departments> 
    </a> 
</li>

並添加到您的子組件：

<p> 
    {{title.name}} 
</p>

來源

2018-02-15 13:57:38 Mike

Angular2 Input（）變量打印undefined

回答

相關問題