如何使用 angular 函数更新元素的 html 内容？

Question

我有一个 table 满足了 ngFor 指令。

每一行都有一个标题、一个徽章（Material 徽章）和一个按钮。我想在单击按钮时更改 matBadge 值。

函数 returns 我想在当前行的 matBadge 中设置它的值，而不是其他值。

有没有办法在我的函数中传递我当前的行标记，以更新值？

更新

这是我的 HTML 代码工作抛出 For 循环的一部分：

<table *ngFor="let layer of items">
    <li>
        <div [id]="layer.id">
            <button [matBadge]="indexLayer">Toggle</button>
            <button (click)="this.utilsService.changeIndex('raise', layer, $event)"> change </button>
        </div>
    </li>
</table>

我想要的是用 id 识别我的 div 并传递给它抛出我的函数（类似于 $event）来更新我的 indexLayer ，每行都不同

谢谢！

Answer 1

好的，我找到了另一个解决方案来实现我的目的

我的 utils.service.ts 文件中有一个属性：

public indexList: Map<String, String> = new Map();

我的函数是这样的：

changeIndex(layer){
    imageryLayers.raise(layer);
    this.utilsService.indexList.set(layer.id, imageryLayers.indexOf(layer));
}

类似上面的东西工作正常。

还有我的 html :

<button [matBadge]="this.utilsService.get(layer.id)"> Toggle </button>

如何使用 angular 函数更新元素的 html 内容？

How to update html content of an element with angular function?

angular-material

angular