Question

我正在用来自api的数据填充复选框，然后将所选选项推送到表单上的数组。我在POST请求中获得了预期的结果，但是我为PUT请求写了另一页，似乎无法选中我的复选框中的选项我之前选择的。这是代码

HTML

<mat-list>
 <mat-list-item *ngFor="let delivery of delivery_modes">
   <mat-checkbox
     (change)="delivery_mode($event)" [value]="delivery">{{delivery}}</mat-checkbox>
 </mat-list-item>
</mat-list>

组件

  delivery_mode(event) {
    if(event.checked) {
      this.form.delivery_mode.push(event.source.value)
    } else {
      this.form.delivery_mode = this.form.delivery_mode.filter(item => item.valueOf() !== event.source.value);
    }
  }

是否有可能确保复选框选项与我之前传递的数据一起被选中？

Answer 1

似乎您想在应用程序的各个页面中使用相同的状态。要维持状态，您可以使用一项可以保持状态的服务[即在您的示例中-模型绑定到复选框]。您可以在各种组件中注入此服务，并将服务数据绑定到模板。您的POST API将继续更新服务数据。这是一种简单且易于实现的方法。

另一种方法可能是利用NGRX存储[https://ngrx.io/]。它功能强大且易于实现复杂的应用程序。

Answer 2

Idetodospoca，您可以始终使用[[ngModel）]来赋予选项价值，而忘记（更改）

<mat-list [(ngModel)]="form.delivery_mode">
 <mat-list-item *ngFor="let delivery of delivery_modes">
   <mat-checkbox [value]="delivery">{{delivery}}</mat-checkbox>
 </mat-list-item>
</mat-list>
<!--just for check-->
{{form.delivery_mode|json}}

因此，您拥有一个可变数组“ selectedDeliveries”

//And you can do by code, e.g.
form.delivery_mode=['delivery1','delivery3']

在stackblitz

中查看一个简单示例

Angular Material CheckBox双向绑定

2 个答案: