angular - 如何在 [(ngModel)] 中使用 Map()？

Question

我正在尝试将特定值获取到特定键的映射中。

在我的代码中，我使用 ngFor 来遍历数组。我在每次迭代中得到的项目应该是 map 的键值，而用户输入相应的值。

重要提示:变量 userInputValue 不存在。这就是我的问题的重点:如何获取 userInputValue 以便将其应用于 map ？我希望你能理解我的意思..

item 是任何字符串，例如 "Name" 和 userInputValue 是用户在 输入字段中输入的任何内容，在这种情况下我如何获得后者？

在我的 Component.html 中

<form *ngFor="let item of myStringArray">
    <input [(ngModel)]="map.set(item, userInputValue)">
</form>

在我的 Component.ts 中

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

public myMethod() {
    this.stringInputs.forEach((item) => {
       this.eintrag.raumgroesseQM = this.map.get(item);
    });
}

是否有可能以这种方式使用 Map，如果可以，我该如何正确地使用它？如果不能，我是否有任何其他方法可以达到这个目标(当然除了创建我自己的类(class))？

我目前的方法使用定界符拆分，看起来像这样:

// the string would be something like: "Name;34"

this.finalInputWithContext.forEach((item) => {

  if (item.split(";")[0] === "Name") {
    concole.log(item.split(";")[1]); // will print 34
  }

});

这个解决方案当然也有效，但是我被告知要改用 Map..

Answer 1

您可以将 [(ngModel)] 分成两部分，[ngModel] 和 (ngModelChange)，并调用适当的 Map 每个部分的方法。用户键入的值由 ngModelChange 事件的 $event 参数给出。

<form *ngFor="let item of myStringArray">
  <input name="value" [ngModel]="map.get(item)" (ngModelChange)="map.set(item, $event)">
</form>

参见 this stackblitz用于演示。