невозможно отобразить в html верхний объект из json в Angular 8

Question

Мне удалось получить значение из указанного ниже формата json из свойства, но не из приведенных выше данных, где я не смог получить данные, такие как имя, теги и обновленные данные.

        {
      "name" : "abc",
      "tags" : "def",
      "updated-by" : "ijk",
      "property" : {
        "description" : "abcd",
        "type" : "string"
      },
      "sources" : {
        "input" : {
          "type" : "lmn",
          "properties" : {
            "key" : "opq"
          }
        }
      }
    }

Пожалуйста, найдите мой код ts

              ngOnInit() {
            const routestream = this.route.paramMap.subscribe(paramMap =>{
              this.id = paramMap.get('id');
            }
            );
            this.unsubscribe.push(routestream);
                /* initially loading data to display procedure and cost table */
                const empDetails = this.dataService.getDetails(this.id).subscribe(response => {
                  this.dataSource = new MatTableDataSource<details>(response.property); 
                  this.dataSource.paginator = this.paginator;
                  this.dataSource.sort = this.sort;
                  this.isLoading = false;
                }, (error) => {
                  this.errorMessage = error;
                  this.isLoading = false;
                });
                this.unsubscribe.push(empDetails);
          }

Когда я пытаюсь получить доступ к верхнему объекту, как показано ниже, в html

           <div class="row">
            <div class="rectangle-blue">
               {{element.name}}
                <label class="box-text">Name</label>
            </div>
            <div class="rectangle-blue">
                {{element.tags}}
                <label class="box-text">tags</label>                
            </div>
            <div class="rectangle-blue">
                {{element.updated-by}}
                <label class="box-text">Updated By</label>                
            </div>
        </div>

Я получаю сообщение об ошибке, не могу прочитать свойство.

Пожалуйста, дайте мне знать, что я здесь делаю неправильно.

Answer 1

Смотреть руководство по Получить данные с сервера

Определить интерфейс:

export interface RespData {
  name: string;
  tags: string;
  // ...
}

Получить ответ:

myResponse: RespData;

ngOnInit() {
  this.dataService.getDetails(this.id).subscribe((response: RespData) => {
    this.myResponse = response;
  }
}

html:

<div class="rectangle-blue">
    {{myResponse.name}}
    <label class="box-text">Name</label>
</div>
<div class="rectangle-blue">
    {{myResponse.tags}}
    <label class="box-text">tags</label>                
</div>