Угловой 5: Свойство 'description' не существует для типа 'any []'

Question

Во время ng build --prod появляется сообщение об ошибке:

ОШИБКА в src / app / book / book.component.html (49,12):: свойство 'description' не существует для типа 'any []'.

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

<p>{{books_edit_data.description}}</p>

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

export class BookComponent implements OnInit {
books_edit_data = [];

constructor(private bookService: BookService) {
  }
editBook(id){
  this.bookService.getBook(id).subscribe(data => {
      this.books_edit_data = data;
      //console.log(this.books_edit_data);
  });
}

и мой book.service.ts , как показано ниже:

getBook(number): Observable<any>{
    const url = `${this.url}/api/book/`+number+`/edit`;
    return this.http.get(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})});
}

console.log(this.books_edit_data);

{id: 1, автор: "Мистер Хорхе Фахей IV", описание: "Ящерица, Билл, был в таких длинных локонах, и мое ... как ваше величество? он спросил. 'Начать в марте. ", create_at:" 2018-03-22 02:26:45 ", updated_at: "2018-03-22 02:26:45"}

Есть предложения по этому поводу?

Answer 1

В случае обращения к asnyc вы должны использовать оператор безопасной навигации, подобный этому

{{books_edit_data?.description}}

также код для объявления должен быть таким (как предложил pranay) -

books_edit_data:any;

Answer 2

объявление его следующим образом позволит избежать ошибки, но это не красиво. Лучше создать класс для данных.

<p>{{books_edit_data['description']}}</p>

Answer 3

должно быть как

books_edit_data:any; and html will be 
<p>{{books_edit_data?.description}}</p>
//if you want to intialize it then 
books_edit_data:any = {};

поскольку вы возвращаете только один элемент из вашего метода getBook(number):

с этим объявлением books_edit_data = []; оно становится массивом, а массив в javascript не имеет свойства description, основываясь на коде, который я вижу, что вы передаете id и ожидаете только один элемент из вашего вызова на сервере.

Answer 4

Вы пытаетесь получить доступ к элементу массива с помощью свойства объекта. Вы должны использовать ngFor или использовать индекс для доступа к конкретному элементу

<p>{{books_edit_data[0].description}}</p>

если вы уверены, что он вернет один элемент, измените его на

books_edit_data :any = {};