Question

我有一个订阅了一些用于填充表的数据的组件。该表使用*ngFor循环数据数组并将其输出到页面，这是典型的东西。

当我像importResults: ImportResults[];那样定义我的数组时，我的数据似乎按预期存储，并且我留下了一个对象数组。

ngOnInit() {
    // Subscribe to our subject that lets us know about the added employees
    this._massEmpService.importedData.subscribe(obj => {
        if (obj) {
            obj.checked = false;
            this.importResults = obj;
        }
    });
}

通过此设置，我可以毫无问题地使用*ngFor，只需执行以下操作：

<tbody>
    <tr *ngFor="let i of importResults" >
        <td>
            <input type="checkbox"
                    id="checkbox_{{ i.QID }}"
                    [checked]="i.checked"
                    (click)="toggleSelectedEmployee(i)"
                    [(ngModel)]="i.checked" />
        </td>
        ...
    </tr>
</tbody>

然而......当我像importResults: ImportResults[] = [];那样初始化我的数组时，它改变了我的数据结构。

这给我留下了一系列对象数组？

这导致我必须在我的桌子上做一些奇怪的嵌套循环，这看起来并不正确。

<tbody *ngFor="let res of importResults">
    <tr *ngFor="let i of res" >
        <td>
            <input type="checkbox"
                    id="checkbox_{{ i.QID }}"
                    [checked]="i.checked"
                    (click)="toggleSelectedEmployee(i)"
                    [(ngModel)]="i.checked" />
        </td>
        ...
    </tr>
</tbody>

这种预期行为需要嵌套这样的东西吗？第一种方法适用于我希望能够循环的方式，但由于它没有初始化，我无法将新数据推送到它，这就是为什么我必须采用预期的定义方式{{1} }

我在这里做错了吗？

Answer 1

在第一个实例中，您声明变量，但不要初始化它，然后当您订阅数据服务时，将生成的对象数组分配给变量：

 this.importResults = obj;

在第二种情况下，声明变量并将其初始化为空数组：

importResults: ImportResults[] = [];

然后，当您从服务中获取数据时，您正在执行此操作：

this.importResults.push(obj);.

这是从数据服务中获取返回的对象数组并将其推送到您已创建的数组中，这就是为什么它最终被嵌套的原因。首先，您要使变量等于您要返回的对象数组，然后在第二步中将对象数组推入现有数组。

如果您在第二种情况下使用相同的作业：

 this.importResults = obj;

您是否会遇到此问题，无论您是否在声明它时将其初始化为空数组。

如果您要尝试从服务中获取一个或多个对象并将它们添加到现有数组（可能已经有一个或多个对象），那么您希望通过subscribe返回对象，并迭代它们，将返回的数组中的每个对象一次一个地推入现有数组。

Angular2 - 为什么初始化我的数组导致我的数据结构出现问题？

1 个答案: