Angular：从模板调用可观察的getter函数

Question

我正在使用Angular 6。

我有一个数据类定义 JSON 对象参数并用作可观察对象

contact-list.component.ts

export class ContactListComponent implements OnInit {

  contacts: Contact;

  constructor(
    private contactService: ContactService   
  ) { }

  ngOnInit() {
    this.getContacts();   
  }

  getContacts(): void {
    this.contactService.getContacts().subscribe(
      contacts => {
        this.contacts = contacts;
      }
    );   
  }
}

contact.service.ts

export class ContactService {

  private contactUrl = '/api/contacts/';

  constructor(
    private http: HttpClient,
  ) { }

  getContacts(): Observable<Contact> {
    const url = 'api_url' + this.contactUrl;

    return this.http.get<Contact>(url)
      .pipe(
        catchError(this.handleError('getContacts', null))
      );
  }
}

contact.model.ts

export class Contact {
  count: number;
  next: boolean;
  previous: boolean;
  results: Array<ContactDetails>;
}

class ContactDetails {
  id: string;
  first_name: string;
  last_name: string;
  full_name: string;
  private _gender: string;
  private _avatar: string;

  get gender(): string {
    if (this._gender === 'm') {
      return 'Male';
    } else if (this._gender === 'f') {
      return 'Female';
    } else {
      return '';
    }
  }

  get avatar(): string {
    if (this._avatar === null) {
      console.log('null is');
      return '../assets/img/bg5.jpg';
    } else {
      console.log('avatar');
      return this._avatar;
    }
  }
}

在contact.model.ts文件的ContactDetails类中，gender()和avatar()有两个函数。

来自服务器的响应有 m 代表 ma​​le 和 f 代表 female 和 avatar 没有头像时字段为空。

我想在头像不存在时显示男性或女性作为性别头像默认头像。

contact-list.component.html

<div class="col-md-4" *ngFor="let contact of contacts.results">
    <img src={{ contact.avatar }} />
    <h2> {{ contact.full_name }}<h2>
    <h4> {{ contact.gender }}</h4>        
</div>

但是contact.gender 打印的是从服务器返回的值，而不是gender() 函数中指定的值。

如何修改模板中响应数据的内容？

Answer 1

您必须将 json 响应（实际上是一个普通对象，而不是您所期望的 Contact 实例）映射到您的映射类。您可以使用map 来做到这一点，例如。构造函数

  getContacts(): Observable<Contact> {
    const url = 'api_url' + this.contactUrl;

    return this.http.get(url)
      .pipe(
        map(data=>new Contact(data));
        catchError(this.handleError('getContacts', null))
      );
  }

显然你必须添加Contact构造函数实现。

export class Contact {
  count: number;
  next: boolean;
  previous: boolean;
  results: Array<ContactDetails>;

 constructor(data:Object){
   ///do the mapping here
 }
}

只要您使用的是接口而不是实现，类型化的响应就很好。 添加此映射后，它将按预期工作。