1 回答

TA貢獻1815條經驗 獲得超10個贊
根據你的例子,我在這里創建了 stackblitz,它使整個arrayChampions
迭代對其值進行了迭代。
示例 HTML:
<hello name="{{ name }}"></hello>
<!-- {{this.products |json}} -->
<ul>
? ? <li *ngFor="let champ of products | keyvalue">
? ? ? ? <label style="font-size: 20px;font-weight: bold;color: red;">
? ? ? {{champ.key}}
? ? </label>
? ? ? ? <ul *ngFor="let item of champ.value | keyvalue">
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? {{item.key}} : {{item.value}}
? ? ? ? ? ? ? ? <ul *ngFor="let sub of item.value | keyvalue">
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? {{sub.key}} : {{sub.value}}
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </li>
</ul>
示例組件.ts:
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { map, catchError, tap } from "rxjs/operators";
@Component({
? selector: "my-app",
? templateUrl: "./app.component.html",
? styleUrls: ["./app.component.css"]
})
export class AppComponent {
? apiURL: string =
? ? "https://ddragon.leagueoflegends.com/cdn/10.23.1/data/es_ES/champion.json";
? name = "Angular";
? products = [];
? constructor(private httpClient: HttpClient) {}
? ngOnInit() {
? ? this.getChamp();
? }
? getChamp() {
? ? this.httpClient.get(this.apiURL).subscribe((data: any) => {
? ? ? this.products = data.data;
? ? ? Object.keys(data.data).map((key: any, obj: any) => obj[key]);
? ? });
? }
}
添加回答
舉報