在AngularDart中使用*ngFor时如何为每个元素设置自定义模型对象

我有一个角度省道页面，我需要在屏幕上为集合中的每个项目创建一个组件。这些项是自定义模型对象：

    class CohortDataSourceAssay{
      String name;
      String displayName;
      bool selected;
      List<String> platforms = new List<String>();

      CohortDataSourceAssay();
    }

class-cohortDataSource{
字符串名；
字符串显示名；
选择布尔；
列表平台=新列表（）；
CohortDataSourceAsay（）；
}

我有一个父页面，我想为上面类集合中的每个元素创建一个模板：

    <data-source-assay *ngFor="let assay of dataSource.assays"></data-source-assay>

以下是数据源分析组件的标记：

    <div class="dataSourceAssay">
        <material-checkbox [(ngModel)]="assay.selected" (ngModelChange)="onCbxChange($event)">{{assay.displayName}}</material-checkbox>
        <material-dropdown-select class="selectStyle"
                                  [disabled]="!assay.selected"
                                  [buttonText]="platformLabel"
                                  [selection]="assaySequencingPlatforms"
                                  [options]="sequencingPlatforms"
                                  [itemRenderer]="itemRenderer">
        </material-dropdown-select>
    </div>

{{assay.displayName}

---

只要它为dataSource.assays中的每个分析元素加载一个块，它就可以工作，但是分析块似乎无法获取分析模型对象。它似乎是空的。如何传递它？

您需要在

组件上声明一个

@Input（）

，通过它可以传递

分析值

@Component(...)
class DataSourceAssayComponent {
  // An input makes this property bindable in the template via [] 
  // notation.
  //
  // Note: I'm not actually sure what the type of `assay` is in your
  // example, so replace `Assay` with whatever the correct type is.
  @Input()
  Assay assay;
}

现在，在创建此组件的模板中，可以将
assay
值绑定到输入

<data-source-assay
    *ngFor="let assay of dataSource.assays"
    [assay]="assay">
</data-source-assay>



请记住，模板中的局部值是该模板的局部值。这意味着你在
ngFor
中声明的
assay
在当前模板之外的任何地方都不可见。
效果非常好！谢谢你，里昂。我还在弄清楚A-D的所有细微差别。