时间戳

首页 > 解决方案 > Angular - 这样做的正确方法

angular - Angular - 这样做的正确方法

问题描述

在 Angular 中，我有一个填充了变量值的下拉列表。我还有一系列应该从下拉列表中禁用的状态。

因此，当存在具有其中一种状态的选项时，我想禁用它，为其添加标题属性并为其添加类文本警告。

这是实际代码

readonly disabledServiceOptions: string[] = ['PA', 'PD', 'PC'];

和 html

<select class="form-control customDropdown" formControlName="option" (change)="onOptionChange(pointIndex)" [(ngModel)]="this.formData[pointIndex].option" required>
<option [ngValue]="this.formData[pointIndex].option" *ngIf="this.formData[pointIndex].disabled">{{ this.formData[pointIndex].optionName }}</option>
<option [ngValue]="null" disabled>Select option</option>
<option *ngFor="let option of filteredServicesList[pointIndex]; "
        [ngClass]="{'text-warning' : disabledServiceOptions.indexOf(option.Status) > -1}"
        [ngValue]="option.ServiceCode"
        [disabled]="disabledServiceOptions.indexOf(option.Status) > -1"
        [title]="disabledServiceOptions.indexOf(option.Status) > -1 ? 'Some description' : ''">
  {{ option.ServiceName }}
</option>

但最后，我最终在同一个块中做了 3 次相同的事情（在 disabledServiceOptions 数组中搜索选项状态）。我的意思是，该数组只有 3 个元素，所以我想在这种情况下这没什么大不了的，但我想知道实现这一点的最佳方法是什么？

filtersServicesList 数组中的数据是从 DB 收集的，对此我无能为力。我想出的唯一一件事是使用附加字段扩展过滤服务列表类型，一旦我填充它并在其中添加此信息，就循环遍历数组。但似乎更糟糕的是，为此在该数组中添加额外的循环。

所以真的需要建议什么是正确的方法

如果您需要任何额外的代码部分，请问，但我无法提供整个应用程序代码

谢谢

标签： angular

解决方案

对我来说，您的代码看起来不错。我不知道你是否更喜欢这个，但你总是可以在ngFor循环中映射数据。像这样的东西；

<option *ngFor="let option of filteredServicesList[pointIndex].map(x => ({ data: x, disable: disabledServiceOptions.indexOf(x.Status) > -1 })); "
        [ngClass]="{'text-warning' : option.disable}"
        [ngValue]="option.data.ServiceCode"
        [disabled]="option.disable"
        [title]="option.disable ? 'Some description' : ''">
  {{ option.data.ServiceName }}
</option>

推荐阅读