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

Question

我正在构建一个 table，它有一个优先级字段和一个百分比字段。

我正在使用一个有输入的网络组件。此输入将根据“状态”优先级而变化，可以是“错误”或“成功”。问题是我正在构建一个 table ，它有一个优先级字段和一个百分比字段。当百分比字段超过 100% 时，它应该更改为状态“错误”，否则为“成功”

我遇到的问题是，一旦百分比字段超过 100%，它就可以正常工作，但它也会改变其他优先级，我只需要将属于相同的输入 chenge优先于“错误”状态。

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

示例：Example Gift

我该如何解决这个问题？

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"

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

Problem with [variable] changing all inputs in a NgFor

html

angular

typescript

angular7