Angular 2在动态生成的“列表”中为新项目添加高亮答案

【问题标题】：Angular 2 add highlight to new item in a dynamically generated "list"Angular 2在动态生成的“列表”中为新项目添加高亮
【发布时间】：2017-10-18 18:19:53
【问题描述】：

我有一个使用 angular 2 和 typescript 显示的连接数组，如下所示：

 <div class="list-item" *ngFor="let con of connectors; let i = index" id="con{{i}}" (click)="connectorSelected(con,i)">
                <label class="list-name">{{con.name || "No Available Name"}}</label>
                <label class="list-desc">{{con.description}}</label>
 </div>

所以基本上当我选择一个连接时，它会在 typescript 中的 typescript 函数 connectorSelected 中突出显示。

private connectorSelected(con: ConnectorModel, index: number) {
        this.removeSelectionOnAllFields();
        let selectedElement = document.getElementById("con" + index);
        selectedElement.className += " selected"
        this.conStatus = SaveStatus.UptoDate;
 }

private removeSelectionOnAllFields() {
    let allClassesHaveSelected = document.getElementsByClassName("selected");
    while (allClassesHaveSelected.length) {
        allClassesHaveSelected[0].classList.remove("selected");
    }
}

但是，当我创建新连接时。我在列表中添加了一个新连接并尝试突出显示新创建的连接，但问题是新创建的连接尚未在 HTML5 网页中呈现。这会导致页面抛出错误，因为我们添加到数组中的新连接器尚未在 html 页面中创建。因此还没有元素存在，它只是在整个函数执行后才在网页中创建元素。

新的连接代码：

 private newConnector(): void {

    let newConenctor: ConnectorModel = new ConnectorModel();
    this.connectors.push(newConenctor);
    let index: number = this.connectors.length - 1;
    this.removeSelectionOnAllFields();
    let selectedElement = document.getElementById("con" + index);
    selectedElement.className += " selected"
}

我想知道我应该如何处理这个问题？

【问题讨论】：

您是否在寻找指令 [ngClass] ？我认为它完全符合您的要求。
我会调查的。谢谢

标签： html css typescript angular2-forms

【解决方案1】：

这是因为角度不会触发变化检测。

为了解决问题，你应该复制你的数组。

this.connectors.push(newConenctor);
this.connectors = this.connectors.slice(0);

否则就像我在评论中所说的，我建议您使用指令 [ngClass]，它更简单，您不必使用全局文档。

你可以在这里找到文档：https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

【讨论】：