如果属性与列表元素中的名称属性匹配，则从数组添加一个类

Question

我有一个带有多个“块”的反应形式，如下所示：

在左侧，我有一个侧边栏，其中每个块编号都与侧边栏中的数字相匹配。如果有任何错误，则会向每个 li 元素添加一个类。侧边栏基本上只是一个无序列表（不是来自数组），并且具有一个也与块名称匹配的名称属性：

    <ul>
     <li name="Personal information">1</li>
     <li name="Employment">2</li>
      //rest of the li elements
   </ul>

验证是从后端完成的，我得到一个包含对象的数组，其中的错误如下所示：

[
    {
        "Message": "Name is required",
        "Type": "Error",
        "Field": "Employment"
    },
    {
        "Message": "Date must start...",
        "Type": "Warning",
        "Field": "Personal Information",
    },

]

我正在努力如何在不执行大量 if 语句的情况下为侧边栏添加类（表单中有 16 个块）。

• 我必须检查错误数组中的属性

  Field

  是否与侧栏中的名称属性匹配，然后添加类（如果存在）。
• 该类应等于错误数组中的

  Type

  属性。
• 如果该名称没有错误，则添加类

  valid

  。

有什么想法可以最好地做到这一点吗？

Answer 1

编写一个简单的函数来检查错误：

getValidationType(errors, field) {
  return errors.find(error => error.field === field)?.Type ?? 'valid';
}

然后在模板中调用：

<li name="Personal information" [class]="getValidationType(errorArray, 'Personal information')">1</li>

您还可以创建一个包含所有字段的数组并迭代它：

fields = [
  'Personal information',
  'Employment',
  // etc...
];

然后在模板中迭代它：

<ul>
    <li 
        *ngFor="let field of fields; let i = index"
        [name]="field"
        [class]="getValidationType(errorArray, field)"
    >
        {{ i + 1 }}
    </li>
</ul>