javascript - 使用`forEach`向表中添加多行而不影响浏览器性能

Question

我通过从模型（子组件）添加名称来在父组件中生成动态表列和行。

父组件 HTML。

<table class="table table-striped table-hover table-condensed">
    <thead>
    <tr>
        <th>Words</th>
        <th *ngFor="let wordList of wordList">{{wordList.word}}
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let keys of workModel">
        <td>{{keys.key}}</td>
        <td *ngFor="let translation of keys.translation">
            <input type="text" [name]="keys.key" [(ngModel)]="translation.value">
        </td>
    </tr>
    </tbody>
</table>

在服务中，我正在调用这个函数。

addWord( newWordName : string ) {

    const addWord = {
        language: newWordName,
        value: ''
    };

    this._workModel.forEach( ( data : EditorInstance ) => {
        data.translation.push( { ...addWord } );
    } );
}

每当我添加一个新词时，浏览器都会进入非响应模式，即它会挂起浏览器。这里this._workModel可能还包含一些值。

下面的附加内容。所以我尝试changeDetection在它的父组件中实现。

addNewWord( newWord : string ) {

    this.cdr.detach();

    setInterval(() => {
        this.cdr.detectChanges();


    this._translatorEditorService.addLanguage( newLanguage )
        .then( () => {
        } ).catch( () => {
    } );
    }, 5000);
}

但还是一样。是否有任何其他实现方式来实现在forLoop.

标签： javascriptangular