1

我有一个带有动态键和值的 Map 如下

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字段。这样我就可以得到如下输出

在此处输入图像描述

4

2 回答 2

1

反复阅读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已知键 lat、lon 和 data，因此我将它们保留cases在Default Case.

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

于 2020-07-02T19:00:26.130 回答
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'"
于 2020-04-21T13:18:25.000 回答