如何解决 ngFor 用于 Angular 渲染的问题答案

【问题标题】：How can I solve a problem with ngFor for Angular rendering如何解决 ngFor 用于 Angular 渲染的问题
【发布时间】：2020-05-20 10:46:10
【问题描述】：

我对一个简单的 Angular 组件有疑问。我正在使用反应形式插入一个选项，然后循环 *ngFor 以查看结果。

如果true 我想查看图标fa-check。
如果false 我只想看到not。

我正在尝试使用对象循环数组，但 *ngFor 不起作用。这是代码，这是stackblitz-project

模板

<form [formGroup]="selectOptionForm">
    <select class="form-control" id="yesOrNot" name="yesOrNot" formControlName="yesOrNot">
      <option *ngFor="let option of optionArray" [value]="option">
          {{option.label}}
      </option>   
    </select>
    <button  type="button"  (click)="addOption()">ADD</button>

</form>

<div
*ngFor="let option of selectOptionArray; let i = index;">
<div> {{ option.label }}</div>
</div>

TypeScript

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

selectOptionForm: FormGroup;
selectOptionArray: any[] = [];

optionArray = [
  {
    label: 'yes',
    option: true
  },
   {
    label: 'not',
    option: false
  },
];

constructor(
    private fb: FormBuilder // form FormBuilder
  ) { }

ngOnInit() {
    // dichiaro il form con i contenuti
    this.selectOptionForm = this.fb.group({ 
      yesOrNot: [null]
    });
  }

 addOption(){
   if (this.selectOptionForm.valid) {
      let option = { 
        yesOrNot: this.selectOptionForm.value.yesOrNot,
      };
      this.selectOptionArray.push(option);
      console.log(option)
    }

    this.selectOptionForm.reset();
 }
}

【问题讨论】：

标签： javascript angular typescript ngfor

【解决方案1】：

更新模板中的选项值：

<option *ngFor="let option of optionArray" [value]="option.option">
    {{option.label}}
</option>

在 addOption 方法中更新键名：

let option = { 
    label: this.selectOptionForm.value.yesOrNot,
};

【讨论】：