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

Question

我有一个Angular Dart页面,我需要在屏幕上为集合中的每个项目创建一个组件.这些项目是自定义模型对象:

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

      CohortDataSourceAssay();
    }

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

    <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>

这适用于在dataSource.assays中为每个测定元件加载块,但是测定块似乎不能获得测定模型对象.它似乎是空的.我如何传递它？

Answer 1

您需要@Input()在<data-source-assay>组件上声明一个可以传递assay值的组件.

@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>

请记住,模板中的本地值是该模板的本地值.意味着assay您在ngFor当前模板之外的任何地方都看不到您的声明.