我如何将对象解析为角度数组？答案

【问题标题】：How I can parse object to array in angular?我如何将对象解析为角度数组？
【发布时间】：2021-10-14 03:23:08
【问题描述】：

我从一个元素数组中得到一个对象，我需要将它解析为一个数组并显示为一个列表，你能告诉我怎么做吗？我只知道如何处理请求。

html:

<ul *ngFor="let filtered of reposFiltered">
              <li>
               {{filtered.name}}
               {{filtered.description}}
               {{filtered.language}}
               {{filtered.html}}
               </li>
            </ul>

.ts:

  // Required data
    selectRepo(data){
      this.reposFiltered = data;
      console.log(data)
    }

大量对象：

0: cu {name: "30daysoflaptops.github.io", description: null, language: "CSS", html: "https://github.com/mojombo/30daysoflaptops.github.io"}
1: cu {name: "asteroids", description: "Destroy your Atom editor, Asteroids style!", language: "JavaScript", html: "https://github.com/mojombo/asteroids"}
etc

【问题讨论】：

objects 数组中的 cu 是什么。这是对象的错误语法

标签： html angular typescript web backend

【解决方案1】：

如果您只想查看行中的数据，可以使用以下代码：

// the data
const data = [
    {name: "30daysoflaptops.github.io", description: null, language: "CSS", html: "https://github.com/mojombo/30daysoflaptops.github.io" }, 
    {name: "asteroids", description: "Destroy your Atom editor, Asteroids style!", language: "JavaScript", html: "https://github.com/mojombo/asteroids"}
];

// Required data
selectRepo(data){
  this.reposFiltered = data.map(row => Object.values(row));
}

//html 
<!-- iterate through all data rows --> 
<ul *ngFor="let row of reposFiltered">
    <!-- iterate through all values -->
  <li *ngFor="let value of row">
    {{ value }}
    </li>
</ul>

【讨论】：

【解决方案2】：

要遍历对象的属性，您需要使用https://angular.io/api/common/KeyValuePipe

类似这样的：

<ul *ngFor="let filtered of reposFiltered | keyvalue">
  <li>
    {{filtered.value.name}}
    {{filtered.value.description}}
    {{filtered.value.language}}
    {{filtered.value.html}}
  </li>
</ul>

如果您需要访问密钥：

{{filtered.key}}

这段代码对调试很有用：

{{filtered.key | json}}
{{filtered.value | json}}

【讨论】：