如何遍历对象数据的对象以填充 angular table

Question

我很难尝试迭代从 api 到 angular bootstrap table 获取的数据。从第一种方法开始，我将数据映射到 prsnl 变量声明为 prsnl: any 并在下面的函数中初始化：

getAllPersnlValues(data) {
   
    return this.persnlService.getPersnl(data)
    .pipe(
      map((response) => response)
    ).subscribe((res) => {this.prsnl = res; console.log('prsnl', this.prsnl)});
  }

在Html这边我有：

       <table class="table table-striped">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">FULL NAME</th>
            </tr>
          </thead>
   
            <tbody>
              <tr *ngFor = "let pr of prsnl">
                <th scope="row">1</th>
                <td>{{pr.result.fullName}}</td>
              </tr>
            </tbody>
        </table>

因为 api 的响应是对象的对象，如下面的屏幕截图所示：

正如您在控制台上看到的那样，api 响应已从 getAllPersnlValues() 方法正确分配给 prsnl 变量，但在 table 中迭代失败，因为 table仍然是空的。

然后我明白我需要将作为对象对象的 prsnl 类型转换为对象数组，以便 *ngFor 可以执行迭代，我现在使用 KeyValuePipe 中的 keyval 来转换api 对数组的响应，正如您在下面的代码中看到的那样：

getAllPersnlValues(data) {
    console.log('data', data);
   
    return this.persnlService.getPersnl(data)
    .pipe(
      map((response) => {
        if(typeof response !== 'undefined') this.keyval.transform(response)
      })).subscribe((res) => {this.prsnl = res; console.log('prsnl', this.prsnl)})
  }

但是这样做会导致项目无法编译，只有当我从 app.module.ts 中删除 KeyValuePipe 导入时它才会编译，我意识到 subscribe() 函数不 console.log this.prsnl 值。然后我怎样才能使响应成为对象的对象并在 table 中显示它呢？我将非常感谢您帮助解决这一障碍。提前致谢。

Answer 1

您正在尝试使用本机不支持的 *ngFor 指令迭代对象。你需要使用 keyvalue 管道来做到这一点。

但是看到你的日志，所需的数组包含在 result 属性中。所以尝试以下

<tr *ngFor = "let res of prsnl?.result">
  <th scope="row">1</th>
  <td>{{ res?.fullName }}</td>
</tr>

如何遍历对象数据的对象以填充 angular table

How can I iterate through object of objects data to fill angular table

arrays

object

key-value

ngfor

angular