显示错误响应时 *ngFor 中的 *ngIf 未定义错误

Question

我有一个 Angular 应用程序和一个基于 Laravel 的 API。我使用 Laravel 中的请求类进行请求验证，并以 JSON 格式获取验证错误。我对输入数组进行了验证，并且验证消息以以下格式显示：

"validation": {
  "items.0": [
    "item required"
  ],
  "items.1": [
    "item required"
  ]
}

我有一个ngFor 循环，用于为items 创建输入字段。 HTML 为

<tr *ngFor="let name of items.controls; index as idx"
   class="form-group">
   <td>
      <p>
         <input [formControlName]="idx" type="text">
      </p>
      <small *ngIf="validationError['items'][idx]" class="text-danger">
          {{validationError['items'][idx]}}
      </small>
   </td>
</tr>

此表单位于模态框中。但是使用这段代码，当我尝试访问打开模式时，它显示 javascript 错误：

ERROR TypeError: Cannot read property '0' of undefined

这是因为只有在单击提交时才会填充错误。在此之前没有错误。如何验证此条件？

Answer 1

你应该瞄准validationError['items.' + idx]，而不是validationError['items'][idx]。 错误来自于您的validationError 对象中没有属性items