Блог

Главная - Вопросы по программированию - Как печатать значения JSON с ключами, начинающимися со специальных символов, используя angular?

Как печатать значения JSON с ключами, начинающимися со специальных символов, используя angular?

#json #angular #typescript

#json #угловатый #машинописный текст #angular #typescript

Вопрос:

Когда я пытаюсь напечатать с помощью @place, он выдает ошибку, в то время как другие ключи доступны.

[{ «ИДЕНТИФИКАТОР»: «001»,
«Название»: «Евразийский голубь с воротником»,
«Тип»: «Голубь»,
«Научное название»: «Стрептопелия»,
«@place»: «Нью-Йорк» }]

Это ошибка, которую я получаю:
Ошибка синтаксического анализатора: неожиданная ошибка лексера токена: неожиданный символ [@] в столбце 6 в выражении [bird.@место], ожидаемый идентификатор или ключевое слово в столбце 7 в [{{bird.@место}}]

Файл component.ts выглядит следующим образом:

 import { Component } from '@angular/core';    
import { HttpClient } from '@angular/common/http';  
import { HttpErrorResponse } from '@angular/common/http';  

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'JSON to Table ';  
  constructor (private httpService: HttpClient) { }  
  arrBirds: string [];  

  ngOnInit () {  
    this.httpService.get('./assets/birds.json').subscribe(  
      data => {  
        this.arrBirds = data as string [];   // FILL THE ARRAY WITH DATA.  
        // this.arrService = JSON.stringify(data);  
        console.log(this.arrBirds);  
      },  
      (err: HttpErrorResponse) => {  
        console.log (err.message);  
      }  
    );  
  }  
}

В component.html файл выглядит следующим образом:

 <table *ngIf="arrBirds">
      
      <tr>
          <th>ID</th>
              <th>Name of Bird</th>
                  <th>Type of Bird</th>
                    <th>Place</th>
      </tr>

      
      <tr *ngFor="let bird of arrBirds">
          <td>{{bird.ID}}</td>
              <td>{{bird.Name}}</td>
                  <td>{{bird.Type}}</td>
                    <td>{{bird.@place}}</td>
      </tr>
  </table>

Комментарии:

1. Вы уверены, что у вас нет опечатки с заглавной буквой P (вместо маленькой буквы p)?

2. Вы могли бы попробовать использовать скобки bird['@Place'] вместо точечной записи.

3. @Guilhermevrs это была ошибка. Но все же после использования p вместо P я получаю ту же ошибку.

4. @MichaelD пользовательский интерфейс отображает bird[‘@place’] вместо печати значений.

5. @SoubhagyaSahoo: Пожалуйста, покажите, как и где вы пытаетесь получить доступ к собственности.

Ответ №1:

Как было отмечено в моем комментарии, вы могли бы использовать обозначение скобок вместо обозначения точек.

 <tr *ngFor="let bird of arrBirds">
  <td>{{ bird['ID'] }}</td>
  <td>{{ bird['Name'] }}</td>
  <td>{{ bird['Type'] }}</td>
  <td>{{ bird['@place'] }}</td>
</tr>

Рабочий пример: Stackblitz

Ответ №2:

В HTML я не знаю никакого другого метода для вызова свойства. Единственное решение, которое я вижу, — это сделать геттер.

В TS

 get place() {
    return bird['@Place']
}

В HTML

 {{ place }}