dart - 在 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 中的每个化验元素加载一个 block ，就可以正常工作，但是化验 block 似乎没有获取化验模型对象。它似乎为空。我如何传递它？

Answer 1

您需要声明一个 @Input()在你的 <data-source-assay>组件，通过它你可以传递 assay值(value)。

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

现在在您创建此组件的模板中，您可以绑定(bind) assay输入值。

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

请记住，模板中的本地值是该模板的本地值。意思是 assay您在 ngFor 中声明在当前模板之外的任何地方都不可见。