angular - 来自 REST API WordPress 服务的对象的角度循环

Question

对 Angular 来说非常新，并试图将 WordPress DB 中的 rest API 附加到我的应用程序中。循环遍历返回到服务调用的对象时出现问题。我可以将它打印到视图中，但是当我尝试循环浏览它时，我得到了这个错误：

“错误错误：尝试区分'[object Object]'时出错。只允许数组和可迭代”

示例数据：

{
  "acf": {
    "email_address": "[e-mail]",
    "favicon": false,
    "favicon_png": false,
    "socialmedia_github": "https://www.github.com/"
    "socialmedia_instagram": ""
    "socialmedia_linkedin: "https://www.linkedin.com/"

  }
}

服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WpOptionsService {
  apiURL = '//myurl.com/wp-json/acf/v3';

  getOptions(): Observable<WpOptions[]> {
    return this.http.get<WpOptions[]>(`${this.apiURL}/options/options`)
  }

  constructor(private http: HttpClient) { }
}

export class WpOptions {
  postID: any
}

零件：

import { Component, OnInit } from '@angular/core';
import { WpOptionsService, WpOptions } from '../../services/wp-options.service'

@Component({
  selector: 'app-splash',
  templateUrl: './splash.component.html',
  styleUrls: ['./splash.component.scss']
})
export class SplashComponent implements OnInit {

  options:WpOptions[] = [];

  constructor(private WpOptionsService: WpOptionsService) { }

  ngOnInit(): void {
    this.WpOptionsService.getOptions().subscribe(optionList => {
      this.options = optionList;
      console.log(typeof this.options);
      console.log(this.options);
    })
  }

}

查看/HTML：

<div *ngFor="let option of options">

</div>

<pre> 
  <code>
     {{ options | json }}
  </code>
</pre>

标签： angularwordpressadvanced-custom-fields

Answer 1

通过遍历键来映射数组找到了解决方案。

零件：

export class SplashComponent implements OnInit {

  options:WpOptions[] = [];

  generateArray(obj:any){
    return Object.keys(obj).map((key)=>{
      return obj[key]
    });
  }

  constructor(private WpOptionsService: WpOptionsService) { }

  ngOnInit(): void {
    this.WpOptionsService.getOptions().subscribe(optionList => {
      this.options = this.generateArray(optionList);
    })
  }

}

然后在组件 HTML 中，我可以按照我最初的预期循环遍历它。我也可以触及更深的物体

<div *ngFor="let option of generateArray(options)">

  {{option.site_email}}

  <div *ngFor="let prof_repeater of generateArray(option.prof_repeater)">

    {{prof_repeater.prof_tax.name}}
  
  </div>

</div>