如何在Angular 6中将ngSwitch与* ngFor一起使用

Question

我有一个带有动态键和值的地图

public featureData = new Map<string, string>();

键值对如下（可能存在其他动态值）

[
  {"name" : "Bangalore"},
  {"type" : "city"},
  {"lat" : "12.9716"},
  {"lon" : "77.5946"}
]

要使用HTML显示此数据，我使用了以下代码

<div class="modal-body">
 <div class="form-group">
  <h4>
   <ol>
    <li *ngFor="let feature of this.featureData | keyvalue"> {{ feature.key }} : <input type="text" class="custom-field form-control form-control-sm form-control form-control-sm-sm"  (change)="updateAnyHashMap(this.featureData, feature.key, $event.target.value)" autocomplete="off" value="{{ feature.value }}"> </li>
   </ol>
  </h4>
 </div>
</div>

上面的代码给了我如下输出

但是我需要使用ngSwitch禁用 lat 和 lon 字段。这样我就可以得到如下输出

Answer 1

我不明白为什么可以使用ngSwitch属性来使用disabled。我不认为这种情况下可以使用ngSwitch

由于我们没有什么可比较的，所以我直接与键值进行比较

将您的input更改为

<input type="text" class="custom-field form-control form-control-sm form-control form-control-sm-sm"  (change)="updateAnyHashMap(this.featureData, feature.key, $event.target.value)" autocomplete="off" value="{{ feature.value }}" [disabled]="feature.key === 'lat' || feature.key === 'lon'">

长话短说，我添加了以下属性

[disabled]="feature.key === 'lat' || feature.key === 'lon'"

Answer 2

最后，我反复阅读Angular Documents后可以找到解决方法。

以下代码解决了我的问题：

<ul *ngFor="let feature of this.featureData | keyvalue" [ngSwitch]="feature.key">
  <li *ngSwitchCase="'lat'"> {{ feature.key }} : <input type="text" class="custom-field form-control form-control-sm form-control form-control-sm-sm" value="{{ feature.value }}" disabled>
  </li>

  <li *ngSwitchCase="'lon'"> {{ feature.key }} : <input type="text" class="custom-field form-control form-control-sm form-control form-control-sm-sm" value="{{ feature.value }}" disabled>
  </li>

  <li *ngSwitchCase="'data'"> {{ feature.key }} : <input type="text" class="custom-field form-control form-control-sm form-control form-control-sm-sm" value="{{ feature.value }}" disabled>
  </li>

  <li *ngSwitchDefault> {{ feature.key }} : <input type="text" class="custom-field form-control form-control-sm form-control form-control-sm-sm" (change)="updateAnyHashMap(this.featureData, feature.key, $event.target.value)" autocomplete="off" value="{{ feature.value }}">
  </li>
</ul>

我已使用<ul>标签在Map中循环数据。即featureData。循环的数据已传递到Switch。由于必须对已知的键lat，lon和数据使用disabled，因此将它们保留在cases中，并将所有其他键保留在Default Case中。

在我的特定用例中调用了(change)的{​​{1}}函数，与该问题无关。