Question

很抱歉，如果这是一个愚蠢的问题，我是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 从“是”更改为“否”，则应禁用多伦多的 wDetails.volume ，而温哥华仍应启用。

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

预先感谢

Answer 1

<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，以便它特定于该组天气详细信息。

Answer 2

抱歉，我没有得到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元素属性，并且不要在html元素属性中使用{{}}

如何基于另一个字段值禁用ngFor中的特定输入字段

2 个答案: