Question

我正在从我无法控制的第三方API中获取json格式的一些数据。数据像这样返回。

        "Hotel": "SponsoredInterContinental Marine Drive",
        "Best-price": "US$\u00a0378US$\u00a0180InterContinental",
        "vendor3-price": "US$378",
        "vendor1": "Expedia.com",
        "vendor1-price": "US$181",
        "vendor2": "Booking.com",
        "vendor2-price": "US$257",
        "vendor3": "Cancelon"

我能够将数据输出到html表中，但是其中一些键的名称中带有破折号（-）。当我尝试使用

访问元素时，这会导致我的打字稿出现问题

  <ng-container matColumnDef="best_price">
    <th mat-header-cell *matHeaderCellDef class="table-header"> Best Price </th>
    <td mat-cell *matCellDef="let element"> {{element.Best-price}} </td>
  </ng-container>

我只是为该索引返回空白数据，但是在Obeservable数组中肯定有数据。我创建了一个使用蛇格键声明的可观察对象，但无法访问该元素。如何访问阵列的“最佳价格”键。

可观察对象

export interface Room {
    hotel: string;
    best_price: string;
    vendor_1: string;
    vendor_2: string;
    vendor_3: string;
    vendor_1_price: string;
    vendor_2_price: string;
    vendor_3_price: string;
}

组件打字稿

export class RoomsComponent implements OnInit {


  displayedColumns: string[] = ['hotel', 'best_price', 'vendor_1', 'vendor_2', 'vendor_3', 'vendor_1_price', 'vendor_2_price', 'vendor_3_price'];
  dataSource: Room[];

  constructor(private roomsService: RoomsService) { }

  ngOnInit() {
    this.getRooms();
  }

  getRooms(): void {
    this.roomsService.getRooms().subscribe(
      data => { this.dataSource = data['comparison'] },
      err => console.error(err),
      () => console.log('done loading rooms'));

    // this.dataSource = this.roomsService.getRooms()['comparison'];
    console.log(this.dataSource);
  }
}

Answer 1

尝试使用{{element["Best-price"]}}进行访问，看看是否可行。可以使用字符串键在对象中访问属性。

Answer 2

尝试用{{element['Best-price']}}代替{{element.Best-price}}

Angular 7将json数据导出到HTML表中。元素名称包含破折号（-）

2 个答案: