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 ，所以我想要一个技巧来帮助我 推送 默认检查额外到oneChoiceConfig（在触发方法toggleNotMultipExtraConfig()后完成）并提前感谢！

Answer 1

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

ngAfterContentInit() {

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

别忘了import和implementAfterContentInit。

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>