使用带有多个数组的ngFor添加项目

Question

我正在尝试列出2个不同数组中的一些数据-我需要将数组分开，以便我可以区分数据。我还需要在第一个数组的项目上添加一个类。

我尝试过：

<div class="divInput" id="divC">
    <div class="divTextInput">
        <input /><button>Add</button>
    </div>
    <div id="CWrapper" class="tableWrapper">
        <div class="cell" *ngFor="let c1 of data.c1">
            <p title={{c1}}>{{c1}}</p><span></span>
         </div>
        <div class="cell kle" *ngFor="let c2 of data.c2">
            <img src={{imagePath}}>
            <p title={{c2}}>{{c2}}</p><span></span>
        </div>
    </div>
</div>

kle类不添加任何CSS，它就在那里，因此我可以区分两者，并触发事件。

数据类在哪里：

class Data {
    c1: string[];
    c2: string[];
}

使用以下命令添加到数组：

$('#divC .divTextInput button').on('click', (ev) => {
    let button = $(ev.currentTarget);
    let input = button.prev();
    if (input.val()) {
        this.data.c1.push(<string>input.val());
        this.data.c2.push(<string>input.val());
    }
});

当我将字符串添加到c2时，它会将其添加到html中，但是当我将字符串添加到c1时，它不会添加至html中（仅添加了class =“ cell kle”的div）

它添加最初在数组中的数据，但是当我动态添加时不添加

如果我记录阵列，它们都具有添加的字符串。

-更新-

如果数组不在类中，则可以使用。