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

Question

在使用以下结构的 Angular 4 应用程序中：

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 模板：

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

在组件 B 中我使用 *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，但引用了正确的数组类型 (CFlightClassQuote)，则当您访问引用的属性时，您的模板中有错字到数组。

这个，

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

应该是，

<app-component-c [dataSet]="item.someArray"></<app-component-c>
                                ^^^
                                here