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在当前模板之外的任何位置都不可见。

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

1 个答案: