＆＃34; [checked] = true＆＃34;的问题在angular2

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推送，所以我想要一个技巧，帮助我推送 默认检查额外到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>