[variable]更改NgFor中的所有输入时出现问题

Question

我正在构建一个具有优先级字段和百分比字段的表。

我正在使用一个Web组件，它有一个输入。该输入将根据"；状态"；优先级可以是"0"；错误"；或"；成功"；。问题是我正在构建一个表，该表有一个优先级字段和一个百分比字段。当百分比字段超过100%时；错误"；否则"；成功；

我遇到的问题是，一旦一个百分比字段超过100%，它就会正常工作，但它也会改变其他优先级，我只需要将属于同一优先级的输入转换为"；错误"；州

正如你在例子中看到的，我有两个不同的优先级(1和3(，当我超过100%的优先级时，我应该只将输入更改为优先级1，而不是优先级3

示例：示例礼品

我该怎么解决这个问题？

html:

<ds-table-body-row slot="row" *ngFor="let detail of beneficiarios; let i = index">
<ds-table-body-column slot="column">
<span slot="element">
<ds-paragraph type="p2" family="primary" weight="regular" color="primary">
<span slot="text" class=""
>{{detail.Priority}}
</span>
</ds-paragraph>
</span>
</ds-table-body-column>
<ds-table-body-column slot="column">
<span slot="element">
<ds-paragraph id = "tett" type="p2" family="primary" weight="regular" color="primary">
<span slot="text" class=""
> <ds-input
size="s1"
value="{{detail.Percent}}"
initial-label= ""
labelOrientation="start"
[state] = "invalidPercent"
(focusout)="focusOutPercent(i, $event.target.value)"
helperMessage='test'>
</ds-input>
</span>
</ds-paragraph>
</span>
</ds-table-body-column>
</ds-table-body-row>

ts:

invalidPercent:any;
focusOutPercent(i: number, percentAdded:any){
this.beneficiarios[i].Percent = percentAdded
let total = 0;
let sum =  i + 1;
this.beneficiarios.forEach(i => {
if(Number(i.Priority) == sum){
total += Number(i.Percent)
if (total > 100) {
this.invalidPercent = "error";
}else{
this.invalidPercent = "success";
}
}
})
}

Answer 1

在代码的某个地方，最好是在获得beneficarios时，在循环中添加新属性：

this.beneficiarios.forEach(item => {
item.invalidPercent = 'success';
})

在您的focusOutPercent方法更改中：

if (total > 100) {
this.invalidPercent = "error";
} else {
this.invalidPercent = "success";
}

收件人：

if (total > 100) {
i.invalidPercent = "error";
} else {
i.invalidPercent = "success";
}

然后在你的html模板更改：

[state] = "invalidPercent"

至

[state] = "detail.invalidPercent"