Question

我有一个api，它返回需要与复选框一起使用的数据。如果我正在编写Angular 4应用，并且我的数据看起来像下面的代码：

mydata = [{name: 'Clark Kent'}, {name 'Lois Lane'}];

我的html看起来像这样：

<div class="members-container">
      <mat-card *ngFor="let member of mydata" class="member-card">
        <div class="card-checkbox">
          <mat-checkbox>
            <h4>{{ member.name }}</h4>
          </mat-checkbox>
        </div>
      </mat-card>
</div>

在控制器中，我想使用复选框来选择要添加到数组的成员。如果api数据返回一个选定的布尔值，则将复选框绑定到数组真的很容易。我可以手动将选定的字段添加到数据中，但是额外的步骤将减慢屏幕上显示的数据的速度。将选中的成员放入我的数组的最佳方法是什么？

Answer 1

使用change事件维护您自己的所选项目列表。

<div class="members-container">
      <mat-card *ngFor="let member of mydata" class="member-card">
        <div class="card-checkbox">
          <mat-checkbox (value)="member.name" (change)="checked(option, $event)">
            <h4>{{ member.name }}</h4>
          </mat-checkbox>
        </div>
      </mat-card>
</div>

TS / JS

selectedValues = [];
function checked(option, $event) {
   if($event.checked) {
      selectedValues.push(option.value);
      //.. unselect etc to be implemented....
   }
}

但是：选定的字段是恕我直言，这是一种更简洁的方法，我不会担心显示该毫秒级的费用。

最佳方法：将GUI数据与API数据分开 您可以根据api中的输入数据创建一个新的选项列表，其中仅包含显示和选定字段所需的属性。通过这种方法，您可以将数据与GUI分开，并可以使用选定的字段。

获取用于GUI的数据列表 TS / JS

myDataForGui = mydata.map(m => {name: m.name, selected: false });

HTML

<div class="members-container">
      <mat-card *ngFor="let member of myDataForGui" class="member-card">
        <div class="card-checkbox">
          <mat-checkbox (checked)="member.selected">
            <h4>{{ member.name }}</h4>
          </mat-checkbox>
        </div>
      </mat-card>
</div>

Angular 4将复选框与不包含布尔值的数据一起使用

1 个答案: