angular - ngFor 迭代 n+1 次以获得至少 1 个值

Question

我有一个表单，您可以在其中添加字段，并且我想确保至少有一个表单可用。

代码示例 https://stackblitz.com/edit/angular-playground-riffgs?file=app/app.component.html

我需要表格来输入至少一个电话号码。有没有办法为 ngFor 迭代 n + 1 次，或者任何其他方法来确保 ngFor 至少渲染一次？

标签： angularngfor

Answer 1

如果 phoneNumbers 数组为空，则应添加一个空的phoneNumber对象，因此在初始化表单时应检查 phoneNumbers 是否有项目。

ngOnInit(){
  if(!person.phoneNumbers.length){
    let emptyPhoneNumber = {
       type: '',
       phoneNumber: ''
    };

    this.person.phoneNumbers.push(emptyPhoneNumber);
 }
}

请注意，这不是配置表单的正确方法，请查看文档以获取更多信息。但是我根据您的示例添加了一个解决方案，您可以在formControl上应用相同的空对象。