Angular 8 и присвоение переменных

Question

В product.html У меня такой код:

<h3>{{product.title}}</h3>
<h4>{{product.categories[0]}}</h4>
<p>{{product.description}}</p>

Я получаю product через ввод (с пустыми начальными значениями), поэтому product.ts выглядит так:

 @Input() product: Product = {title: '', categories: [''], description: ''};

я хотел бы, что product.html будет выглядеть так:

<h3>{{title}}</h3>
<h4>{{subtitle}}</h4>
<p>{{description}}</p>

У меня вопрос, как я могу этого добиться?

Я пробовал для переменных title, subtitle, description просто указать на productсвойства (title, categories[0], description), так что product.ts будет выглядеть так:

 @Input() product: Product = {title: '', categories: [''], description: ''};
 title = product.title;
 subtitle = product.categories[0];
 description = product.description;

Но это не работает.

Answer 1

Вы можете определить свои свойства, а затем установить их в ловушке жизненного цикла ngOnChanges.

... definition
title: string;
subtitle: string;
description: string;
... inside ngOnChanges
this.title = this.product.title;
this.subtitle = this.product.categories[0];
this.description = this.product.description;

Другой вариант - использовать функции для получения значений:

title = () => this.product.title;
subtitle = () => thisproduct.categories[0];
description = () => this.product.description;

И используйте их в своем представлении как:

{{title()}}
{{subtitle()}}
{{description()}}

Answer 2

Решение с геттерами:

get title(): string {
  return this.product.title;
}

get subtitle(): string {
  return this.product.categories[0];
}

get description(): string{
  return this.product.description;
}

В шаблон:

<h3>{{title}}</h3>
<h4>{{subtitle}}</h4>
<p>{{description}}</p>

Answer 3

Попробуйте вот так

 title: string;
 subtitle: string;
 description: string;

ngOnInit() {
  this.title product.title;
  this.subtitle = product.categories[0];
  this.description = product.description;
}