Question

Angular：尝试比较“[object Object]”时出错。仅允许使用数组和可迭代对象

2021-12-13

11268

javascript angular typescript

我尝试迭代通过服务调用收到的对象，然后使用 *ngFor 将此迭代放入表中。

但是，尝试执行此操作时，我收到以下错误。

Error trying to diff '[object Object]'. Only arrays and iterables are allowed

我理解您无法迭代对象，但是当我尝试寻找解决方案时，它对我来说并不太合理。请参阅下面的代码，任何帮助都将不胜感激：

.ts

searchValue: string = "3";
logList: any = [];
   
getLogs() {
        const numOfLogs = new FormData();
        numOfLogs.append('n_log', this.searchValue)
        this.fileUploadService.getLogs(numOfLogs).subscribe(
          data =>  {this.logList = data},
        );
      }

html

<table class="table table-striped" style="width:1000px;table-layout:fixed;font-size:10px;color:black;">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Date</th>
                        <th>FilePath</th>
                        <th>Updated</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of logList">
                        <td>{{ item.Name}}</td>
                        <td>{{ item.Date}}</td>
                        <td>{{ item.FilePath}}</td>
                        <td>{{ item.Updated}}</td>
                    </tr>
                </tbody>
            </table>

console.log(this.logList)

{
  "Name": [
    "name1",
    "name2",
    "name3"
  ],
  "Date": [
    "2021-12-13",
    "2021-12-12",
    "2021-12-11"
  ],
  "FilePath": [
    "FileName1.xlsx",
    "FileName2.xlsx",
    "FileName3.xlsx",
  ],
  "Updated": [
    "2021-12-31T00:00:00",
    "2021-12-31T00:00:00",
    "2021-12-31T00:00:00",
  ],
}

Answer 1

使用 keyValue 管道，因为 loglist 不是数组，下面的代码将解决您的问题

            <tbody>
                <tr>
                    <td *ngFor="let item of logList | keyvalue"">{{ item.value}}</td>
                </tr>
            </tbody>

Answer 2

*ngFor 不允许您迭代对象。它应该迭代什么，对象的键还是值？

我猜如果您运行：

this.fileUploadService.getLogs(numOfLogs).subscribe(
    data =>  { console.log(typeof data); this.logList = data;},
);

它将记录“对象”。

如果您想在模板中迭代一个对象，您可以将其转换为 .ts 文件中的数组/可迭代对象并使用它：

let iterableLogList = Object.keys(this.logList);

或者您可以将 this.logList 管道插入 Angular 的内置 keyvalue 管道。

*ngFor="let item of logList | keyvalue"

您不需要导入任何新内容即可使用它。现在，每个项目的键将在模板中以 item.key 的形式提供，同样，其值也将以 item.value 的形式提供。

Answer 3

这些解决方案对我都不起作用。我认为错误出现（就我而言）是因为数组为空（我正在检查在 http 服务调用返回后将被分配的值）。我所需要做的就是使用条件子句：

            <tbody *ngIf="logList">
                <tr *ngFor="let item of logList">
                ...