Typescript 如何在Angular 6中使用带有*ngFor的ngSwitch

我有一个带有动态键和值的地图，如下所示

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

为了在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>

{{feature.key}的功能：

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

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

---

我不明白当您可以使用

禁用的
属性时，为什么要使用
ngSwitch
。我认为您不能使用
ngSwitch
这种情况下

因为我们没有任何东西可以比较，所以我直接与关键值进行比较

将您的
输入更改为

<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'">

经过反复阅读，我终于找到了解决办法

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

<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>


{feature.key}：

{feature.key}：

{feature.key}：

{feature.key}



我使用了
标记在我的
地图中循环数据。也就是说，
featureData
。循环数据已传递到
开关
。由于我必须对已知的键lat、lon和data使用
disabled
，我将它们保存在
cases
中，并将所有其他键保留在
默认Case
中

默认情况下的
（更改）
函数是为我的特定用例调用的，与此问题无关。
到目前为止，您试图解决什么问题？我不知道如何在这里使用ngswitch。为了实现我的用例，根据我的理解，ngswitch是唯一的解决方案
[disabled]="feature.key === 'lat' || feature.key === 'lon'"

<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>