Question

我有一个连接数组，我使用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"
}

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

Answer 1

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

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

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

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

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

Angular 2在动态生成的＆＃34;列表中为新项添加突出显示＆＃34;

1 个答案: