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 ，对于女性和头像 f / strong>没有头像时字段为空。

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

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
 }
}

只要您使用的是接口而不是实现，

键入响应就很好。添加此映射后，它将按预期工作。

角度：从模板

1 个答案: