如何将数据绑定到Angular 2中的多个嵌套组件？

Question

在使用以下结构的Angular 4 app中：

ComponentA从服务中获取以下模型：

class ViewModel {
    public someBool: boolean;                
    public someNumber: number;               
    public someArray: CFlightClassQuote[];   
    public someOtherNumber: number;               
    public someString: string; 
}

ComponentA类：

export class ComponentA implements OnInit {
  searchResult: Array<ViewModel>;

  constructor(private searchResultService: SearchResultService, private router: Router) { }

  ngOnInit(): void {
    this.searchResultService.getSearchResultTable('hash').then( result => {
      this.searchResult = result;
    });
  }
}

ComponentA tempate：

*some html*
    <div>
      <app-component-b [dataSet]="searchResult"></app-component-b>
    </div>
*some html*

在componentB中我使用* ngFor

ComponentB模板：

<div class="results-table" *ngFor="let item of dataSet">
   <span>{{item.someString}}</span>
   <app-component-c [dataSet]="item.SomeArray"></<app-component-c>

another html
</div>

ComponentB类：

export class ComponentB implements OnInit {
  @Input() dataSet: Array<ViewModel>;

  constructor() { }

  ngOnInit() {
  }

数据正确绑定ComponentB但ComponentC仍为空。 我认为我在这个字符串中错了：

<app-component-c [dataSet]="item.SomeArray"></<app-component-c>

数据应该像ComponentA和ComponentB一样传递到ComponentC。

如何正确完成？

Answer 1

假设你的问题拼写正确，并假设你的组件C被定义为类似于组件B但引用了正确的数组类型（Variable containing: 2.4498 [torch.FloatTensor of size 1] ），那么当你访问时，模板中会出现拼写错误涉及数组的属性。

此，

CFlightClassQuote

应该是，

<app-component-c [dataSet]="item.SomeArray"></<app-component-c>