ステートレスコンポーネントへのデータのアクセスとアクセスアングルで

Question

私は非常にシンプルなものを試していますが、問題がたくさんあります。私は、コンテナコンポーネントと子コンポーネントを持っている：

-- street.dashboard.component 
---- street.search.component 

私はサービスコールをやって、私のダッシュボードコンポーネントにデータを設定してから、私の子コンポーネントで、しかし

<street-search locations="streets"></search> 

を使用して、それを渡しています、クラス内のそのデータにアクセスできません。私はそれをテンプレートでうまくレンダリングすることができ、それが通過しているのを見ますが、私のクラスでそれにアクセスすることはできません。

アイデア？

ストリートdashbaord.component

@Component({ 
    selector: 'street-dashboard', 
    styleUrls: ['street-dashboard.component.scss'], 
    template: ` 
     <street-search locations="streets"></street-search> 
    ` 

export class StreetDashboardComponent implements OnInit { 
    streets: any; 
    constructor(private streetService: StreetDashboardService) {} 
    ngOnInit() { 
     console.log("ngOnInit"); 
     this.streetService 
     .getStreets() 
     .subscribe((data: Street[]) => this.streets = data); 
    } 
} 

ストリート検索コンポーネント

@Component({ 
    selector: 'street-search', 
    template: ` 
     {{ locations.length }} <!-- This renders fine --> 
     <md-input-container> 
      <input type="text" mdInput placeholder="Enter your street..." 
      [formControl]="myControl" [mdAutocomplete]="auto"> 
     </md-input-container> 

     <md-autocomplete #auto="mdAutocomplete" showPanel="false"> 
      <md-option *ngFor="let option of filteredOptions | async" 
      [value]="option" (onSelectionChange)="selected($event, option)"> 
       {{ option }} 
      </md-option> 
     </md-autocomplete> 
    ` 
}); 

export class StreetSearchComponent { 
    @Input() 
    locations: any; 

    constructor() { 
     console.log("Locations: ", this.locations); // Undefined ?? 
    } 
} 

ブラウザでlocations.lengthを見ているにもかかわらず、私はまた、

ERROR TypeError: Cannot read property 'length' of undefined 

のコンソールエラーが出るん

私は子供のコンポーネントでngOnInitを使用しようとしましたが、喜びはありませんでした。おかげ

Answer 1

@Inputので、通常はそれがOnInitで利用可能です、（、すべての最初に実行されるコンストラクタがありそう利用できません）OnChangesで利用可能な最初のですが、データの検索は非同期であるため、私はそれはまだだろう推測しています子にはOnInitを実行すると定義されていません。

あなたは変更がInput変数に起こるときに発生するOnChangesで@Input変数の変化、のために見て、そうしようとすることができます

ngOnChanges() { 
    if(!locations.length) { 
    console.log('not yet!') 
    } else { 
    console.log(locations) 
    } 
} 

そしてAluanが親切に指摘したように、あなたも周り[ ]を忘れてしまいましたlocations。ブラケットを使用すると、実際にあなたの変数streetsに結合されているので、それは次のようになります。

<street-search [locations]="streets"></search>