Angular 7 экспортирует данные json в таблицу HTML.Имя элемента содержит тире (-) - PullRequest
Новая
       21

Angular 7 экспортирует данные json в таблицу HTML.Имя элемента содержит тире (-)

0 голосов
/ 26 апреля 2019

Я получаю некоторые данные в формате json от стороннего API, который я не контролирую. Данные возвращаются вот так. 

        "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 определенно есть данные. Я создал observable, который использует декларации ключей регистра змеи, но не могу получить доступ к элементу. Как получить доступ к ключу «Лучшая цена» массива.

Наблюдаемый объект 

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);
  }
}

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Попробуйте {{element['Best-price']}} вместо {{element.Best-price}}

1 голос
/ 26 апреля 2019

Попробуйте получить доступ с помощью {{element["Best-price"]}} и посмотрите, работает ли это.Свойства могут быть доступны в объектах с помощью строкового ключа.

...