Присвойте свойства объекта @Input () компоненту

Question

У меня есть угловой компонент с одним элементом @Input:

@Input('member') member: Member;

интерфейс Member выглядит следующим образом:

export interface Member {
  name: string;
  surname: string;
  display_name: string;
  positions: number[];
  image_url: string;
  email: string;
  address: string;
  office_phone: string;
  phone: string;
  whatsapp: string;
  skype: string;
}

Iхотите получить доступ к полям члена из html-шаблона, например {{ name }}, {{ email }} и т. д., без префикса каждого из них.

Например, я не не хочу получить доступ к этим свойствамкак {{ member.name }}, {{ member.email }}, мне нравится сокращенная версия.

Компонент будет иметь только одно свойство @Inpurt - объект Member.

Есть ли хороший способ переназначениячлен.свойства к угловому компоненту?Или другой способ использовать ярлык, о котором я упоминал выше?

Answer 1

Не очень хорошая практика, но вы должны распространить этот объект на ваш компонент:

ngOnInit() {
  Object.entries(this.member).forEach(([key, value]) => this[key] = value);
  // OR
  Object.assign(this, this.member);
}

Теперь вы можете использовать их, как если бы они были свойствами класса. Имейте в виду, что оно переопределит любое другое свойство с таким же именем в вашем классе, поэтому вы должны быть осторожны с этим решением и вместо этого использовать member.XXX.