如何根据另一个字段值禁用 ngFor 中的特定输入字段答案

【问题标题】：How to disable a specific input field in ngFor based on another field value如何根据另一个字段值禁用 ngFor 中的特定输入字段
【发布时间】：2018-07-07 04:15:20
【问题描述】：

对不起，如果这是一个愚蠢的问题，我是 Angular 的新手。我对此进行了搜索，但找不到类似的问题。请让我知道这是否重复。

我有如下数据集

    {{country: "Canada";
      city: "Toronto";
      weather: {
      {date: "06JUL2018"
          temp: 26;
          rain: "3mm";},
      {date: "07JUL2018"
          temp: 24;
          rain: "0mm";}
      {date: "08JUL2018"
          temp: 28;
          rain: "0mm";}......}
    },
    {country: "Canada";
      city: "Vancouvr";
      weather: {
      {date: "06JUL2018"
          temp: 31;
          rain: "0mm";},
      {date: "07JUL2018"
          temp: 23;
          rain: "0mm";}
      {date: "08JUL2018"
          temp: 21;
          rain: "0mm";}......}
    },........
    }

在我的 html 中有

    <form *ngFor='let data of dataList'>
      <fieldset>
        <legend>{{ data.country }} - {{data.city}} </legend>
        <ng-container *ngFor='let wDetails of data.weather' >
          <label >{{ wDetails.date }}:</label>  
          <select name={{wDetails.rain}} value={{wDetails.rain}} (ngModel)="flag">
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
          <input type="text" name={{wDetails.volume}} value={{wDetails.volume}} [disabled]="flag">
        </ng-container>
      </fieldset>
    </form>

我对数据和代码进行了一些更改，以隐藏工作中的敏感信息，但想法是一样的。

我要做的是根据该城市的 wDetails.rain 字段值禁用 wDetails.volume 输入字段。如果用户将多伦多的 wDetails.rain 从 'yes' 更改为 'no'，那么多伦多的 wDetails.volume 应该被禁用，而温哥华的应该仍然启用.

当我以我的方式进行操作时，页面上的值 wDetails.rain 变为空，当我更改它时，它会禁用所有 wDetails.volume 输入字段。

提前致谢

【问题讨论】：

标签： javascript angular

【解决方案1】：

抱歉，我没听懂busDefConfig 是什么，希望在这种情况下没关系

这是解决方案

<form *ngFor='let data of dataList'>
      <fieldset>
        <legend>{{ data.country }} - {{data.city}} </legend>
        <ng-container *ngFor='let wDetails of data.weather' >
          <label >{{ wDetails.date }}:</label>  
          <select [name]="busDefConfig.type" [(ngModel)]="wDetails.showVolume">
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
          <input type="text" [name]="wDetails.volume" [value]="wDetails.volume" [disabled]="!wDetails.showVolume">
        </ng-container>
      </fieldset>
    </form>

您的问题是将此逻辑绑定到全局变量flag。您只需要将它绑定到与wDetails 对象相关的本地内容，因此更改将仅影响使用此特定对象的元素。在这种情况下我使用了wDetails.showVolume

您还可以通过将其包装到[] 中来绑定html 元素属性，而不是在html 元素属性中使用{{}}

【讨论】：

我的选择字段不会因为 'value={{wDetails.rain}}' 被删除而变为空吗？如果我同时使用 value={{wDetails.rain}}' 和 '[(ngModel)]="wDetails.showVolume"' 值不会显示。我今天晚些时候会尝试，但我记得我在实验时发生了这种情况
value 不是绑定到该元素

【解决方案2】：

<ng-container *ngFor='let wDetails of data.weather' >
      <label >{{ wDetails.date }}:</label>  
      <select name={{busDefConfig.type}} value={{busDefConfig.value}} (ngModel)="flag">
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
      <input type="text" name={{wDetails.volume}} value={{wDetails.volume}} [disabled]="flag">
 </ng-container>

我怀疑您的 ngModel 应该是 wDetails.flag 而不是 flag，因此它特定于那组天气详细信息。

【讨论】：