無法讀取子視圖

的可變數據我有一個組件MyComponent並聲明如下：無法讀取子視圖

export class MyComponent implements IComponent { 
    ... 
    @Input() Departments: any;  
    @Input() DropDownOptions: any;  
    @Input() Data: any[]; 
    ... 
}

然而，沒有物業Data，當我嘗試從PersonComponent組件來訪問。

HTML PersonComponent組件：可以在Chrome瀏覽器的調試器可以看到

export class PersonComponent implements OnInit {  
    @ViewChild('myGrid') myGridComponent: MyComponent; 

    ngAfterViewInit() { 
     debugger;   
     let localData2 = this.myGridComponent.Data; // NO DATA PROPERTY. Undefined 

    } 

    ngAfterContentInit() { 
     debugger;   
     let localData1 = this.myGridComponent.Data; // NO DATA PROPERTY. Undefined  
    } 

}

變量：

<fieldset> 
    <my-comp #myGrid [Options]="ps.Options['myGrid']"></my-comp> 
</fieldset>

打字稿PersonComponent組件的

我怎樣才能讀取值爲DataMyComponent的財產？我究竟做錯了什麼？

來源

2017-08-15 StepUp

您的'@Input（）Data'是一個Input-decorator，因此您需要將數據提供給您的組件。 'my-comp #myGrid [Options] =「ps.Options ['gridShipmentHeaders']」[Data] =「someData」>' – John

數據未定義 – Milad

@Input Data ...裝飾器「接收」來自父組件的數據。您可以通過父模板中的[Data]屬性進行設置。如果你沒有設置它，它將是不確定的。另一方面，你有[Options]屬性在子項中沒有相應的@Input。

可以修復它像這樣：

<fieldset> 
    <my-comp #myGrid [Data]="person.data"></my-comp> 
</fieldset>

其中人是在父組件與數據字段的陣列。

請閱讀若有所思的機制的文檔https://angular.io/guide/template-syntax#inputs-outputs和https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

那將是最好不要使用像數據，選項保留/過於籠統的名稱，以避免名稱衝突，也駱駝他們。

來源

2017-08-15 11:53:06 Vega

換句話說我應該從'PersonComponent'發送數據到'MyComp '在'PersonComponent'處獲取[Data]屬性？ – StepUp

從你的代碼邏輯：是的。但它可能是從服務等取得的。但在這種情況下，您不需要@Input – Vega

@Input用於您的情況下的父級子通信 – Vega

無法讀取子視圖

回答

相關問題