angular2 中“[checked]= true”的问题

Question

我有一种管理餐馆内订单的方式 angular2 应用程序。所以我有这个代码：

 <md-radio-group>
   <span *ngFor="let extIng of item.extra_ingredients;">
      <md-radio-button *ngIf="extIng.default === false" [value]="extIng" (click)="toggleNotMultipExtraConfig(extIng)">
        <span>{{extIng.name}}</span>
      </md-radio-button>
      <md-radio-button *ngIf="extIng.default === true"  [value]="extIng" (click)="toggleNotMultipExtraConfig(extIng)" [checked]=true> 
        <span>{{extIng.name}}</span>
      </md-radio-button>
   </span>
 </md-radio-group>

而这个 TS 部分：

@Input() item: Item;
public oneChoiceConfig:          any[]= [];

//....

toggleNotMultipExtraConfig(extra: any): void {

  this.oneChoiceConfig.push(extra);

}

两者都产生了这个：我的问题是，当添加 [checked]=true 参数时，我会得到一些默认选中项目的浇头，但是一旦提交订单，我就没有得到 oneChoiceConfig 中的任何东西，所以我想要一个可以帮助我的技巧到 push 默认检查额外 到 oneChoiceConfig （在启动方法 toggleNotMultipExtraConfig() 后完成）并在此先感谢！

Answer 1

您可以在您的 TS 文件中执行这样的解决方法：

ngAfterContentInit() {

  this.item.extra_ingredients.forEach((value, key) {
    if (value.default === true) {
      this.oneChoiceConfig.push(v);
    }
  })
}

并且不要忘记导入和实现 AfterContentInit.

Answer 2

一种可能的解决方案是像这样在 ngOnInit 挂钩中添加这个顶部

ngOnInit() {
    this.item.extra_ingredients
      .filter(extra => extra.default)
      .map(extra => this.oneChoiceConfig.push(extra);

}

我可以建议的另一件事是简化 html 模板。而不是：

  <md-radio-button *ngIf="extIng.default === false" [value]="extIng" (click)="toggleNotMultipExtraConfig(extIng)">
    <span>{{extIng.name}}</span>
  </md-radio-button>
  <md-radio-button *ngIf="extIng.default === true"  [value]="extIng" (click)="toggleNotMultipExtraConfig(extIng)" [checked]=true> 
    <span>{{extIng.name}}</span>
  </md-radio-button>

你可以使用这个：

 <md-radio-button [value]="extIng" (click)="toggleNotMultipExtraConfig(extIng)" [checked]="extIng.default">
    <span>{{extIng.name}}</span>
  </md-radio-button>

angular2 中“[checked]= true”的问题

An issue with "[checked]= true" in angular2

html

typescript

angular-material2

angular