Angular 9 - *ngFor 选择下拉渲染选项作为空白答案

【问题标题】：Angular 9 - *ngFor over select drop down rendering options as blanksAngular 9 - *ngFor 选择下拉渲染选项作为空白
【发布时间】：2021-01-08 23:36:26
【问题描述】：

这是场景：我正在尝试使用 *ngFor 创建一个下拉列表，并使用对象数组作为源。

我可以 console.log 数组并且一切都在那里，但选项被呈现为空白值。没有 *ngFor 的常规工作正常。

它是这样渲染的：https://i.stack.imgur.com/fu6RX.png

这很像我用来隔离问题的东西（它在这里工作，只是一个例子，不是实际的代码）：https://stackblitz.com/edit/angular-select-example-ngfor-wcp3kt

选项模型

export class BaseParametro {
  private _id: number;
  private _descricao: string;

  constructor(id: number, descricao: string) {
    this._id = id;
    this._descricao = descricao;
  }
  get id(): number {
    return this._id;
  }

  set id(id: number) {
    this._id = id;
  }
  get descricao(): string {
    return this._descricao;
  }

  set descricao(descricao: string) {
    this._descricao = descricao;
  }
}

Ts 组件：

export class CadastroComponent implements OnInit {
  tiposGeneros: BaseParametro[] = [];

  constructor() {
    this.tiposGeneros.push(new BaseParametro(1, "F"));
    this.tiposGeneros.push(new BaseParametro(2, "M"));
    this.tiposGeneros.push(new BaseParametro(3, "S"));
  }
  ngOnInit() {}
}

Quote: 如果我将新内容推送到tiposGeneros 数组，UI 上会出现一个新的空白

html代码：

<div class="col-md-2">
   <label>Sexo</label>
   <div class="select-wrap">
      <select name="select">
         <option selected value="Selecione">Selecione</option>
         <option *ngFor="let sexo of tiposGeneros" [value]="sexo">{{sexo.descricao}}</option>
      </select>
   </div>
</div> ```

【问题讨论】：

标签： javascript html angular ngfor

【解决方案1】：

原来问题不在于代码的那部分。（还）不太了解组件的生命周期，但由于父组件或调用者组件中的错误，渲染无法正常工作。

纠正（希望）所有错误并得到想要的结果。

【讨论】：