Question

我有li标记*ngFor

<li *ngFor="let items of buttons">
  <button (click)="newMap(items.id, $event)">
    {{ items.name }}
  </button>
</li>

所以，按钮数组看起来像这样：

buttons = [
  {name: 'Berlin', id: 'mapBerlin'},
  {name: 'New York', id: 'mapNewYork'},
  {name: 'Tokyo', id: 'mapTokyo'}
]

我在标记(click)上分配button方法：

(click)="newMap(items.id, $event)"

打字稿：

newMap($event) {
  console.log($event)
}

当我点击1号按钮时，我在控制台中收到了这条消息：

mapBerlin

按钮编号2：

mapNewYork

等

如何制作这样的功能？：

newMap(this.id) {
  this.markers = this.id
}

我想将this.markers更改为this.id (this.mapBerlin) (this.mapNewYork)等。

Answer 1

这很好

<li *ngFor="let items of buttons">
  <button (click)="newMap(items.id, $event)">
    {{ items.name }}
  </button>
</li>

你的功能

newMap(id, event){
this.markers = id}

Answer 2

我很确定你的代码应该像那样工作：

newMap(newId) {
  this.markers = newId;
}

只需指定传递的ID。

Answer 3

试试这个：

<li *ngFor="let items of buttons">
    <button (click)="newMap(items)">
    {{ items.name }}
    </button>
</li>

newMap = (item) => {
    this.markers = item.id;
}

Answer 4

无需更改功能的上下文：

你可以这样做：

newMap(id, event){
    this.markers = id;
}

如果您仍在寻找修改上下文this，请执行以下操作：

<li *ngFor="let items of buttons">
  <button (click)="newMap.call(items, $event)">
    {{ items.name }}
  </button>
</li>

在TS

const componenContext = this;
.
.
.
newMap(event){
    componenContext.markers = this.id;
}

但我不推荐这种方法。这真是太烂了。

Answer 5

此代码没问题：

newMap = (item) => {
    this.markers = item.id;
}

但我在控制台中有这条消息：

'mapTokyo'. Only arrays and iterables are allowed

Answer 6

为什么不呢？

buttons = [
  {name: 'Berlin', id: this.mapBerlin},
  {name: 'New York', id: this.mapNewYork},
  {name: 'Tokyo', id: this.mapTokyo}
]

然后你在id中收到整个对象

从ngFor内的按钮分配另一个功能“this”

6 个答案: