如何使用 Angular 访问 JSON 中的特定对象？

Posted 2023-02-23

【中文标题】如何使用 Angular 访问 JSON 中的特定对象？

【英文标题】：How to access specific object in JSON using Angular?

【发布时间】：2021-04-07 07:20:40

【问题描述】：

我正在尝试从 API 访问某些数据，但在这样做时遇到了问题。以下是 API 中 JSON 的结构：

我想在value 中访问Name、StateName 和CityName 以遍历表。我收到明显的错误“找不到'object'类型的不同支持对象'[object Object]'。NgFor 仅支持绑定到可迭代对象，例如数组”，因为 ngFor 没有遍历数组。如何修复我的代码以迭代数据以填充我的表格？

component.ts:

@Component(
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
)
export class SearchComponent implements OnInit 

  customer: any;

 constructor(private Service: CustomerDataService)  

  ngOnInit(): void 
    this.getCustomerData();
  

  public getCustomerData() 
    this.Service.getCustomers().subscribe((data)=>
      console.log(data);
      this.customer = data;
    ) 
  

HTML：

<div class="container">
    <form class="form-inline">
        <div class="input-group mb-2">
            <div class="has-clear">
                <input type="text" name="search" required class="form-control" placeholder="Name" />
                <button class="clear-data" type="reset"><i class="icon-close-bold-sm"></i></button>
            </div>
            <button type="submit" class="btn btn-primary mb-2 ml-3">Search</button>
        </div>
    </form>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">City</th>
                    <th scope="col">State</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor = "let customers of customer">
                    <td scope="row">customers.value.Name</td>
                    <td scope="row">customers.value.StateName</td>
                    <td scope="row">customers.value.CityName</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

【参考方案1】：

考虑使用 | async 直接在你的 html 中访问 observable

<tr *ngFor = "let customer of customers$ | async">
    <td scope="row">customer.Name</td>
    <td scope="row">customer.StateName</td>
    <td scope="row">customer.CityName</td>
</tr>

在你的组件中

customers$ : Observable<Customer> = this.getCustomerData();

您可以使用地图运算符更新您的getCustomerData，以返回您在 value 属性中拥有的客户列表。

【参考方案2】：

值是一个数组而不是对象，所以

  public getCustomerData() 
    this.Service.getCustomers().subscribe((data)=>
      console.log(data);
      this.customer = data.value;
    ) 
  

在你的模板中

<tr *ngFor = "let customers of customer">
    <td scope="row">customers.Name</td>
    <td scope="row">customers.StateName</td>
    <td scope="row">customers.CityName</td>
</tr>

或者你可以编辑你的模板

<tr *ngFor = "let customers of customer.value">
    <td scope="row">customers.Name</td>
    <td scope="row">customers.StateName</td>
    <td scope="row">customers.CityName</td>
</tr>