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

Question

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

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

      CohortDataSourceAssay();
    }

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

    <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

您需要在 <data-source-assay> 组件上声明一个 @Input()，通过它您可以传递 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>

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

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

How to set custom model object for each element when using *ngFor in AngularDart

dart

angular-dart