如何在 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>

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

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

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。由于我必须使用 disabled 作为已知键的纬度、经度和数据，所以我将它们保存在 cases 中，而将所有其他的保存在 Default Case.

中

Default Case 处的 (change) 函数是针对我的特定用例调用的，与此问题无关。

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

How to use ngSwitch with *ngFor in Angular 6

typescript

hashmap

angular6

ng-switch

angularjs-ng-switch