Angular2：模板中類的訪問方法

Question

我在Angular2應用中有以下課程

export class Contact {

  constructor(
    public has_reply: boolean,
    public archived: boolean
  ) {  }

  getStatus() : string {
    if (this.archived) {
      return "Archived";
    }

    if (this.has_reply) {
      return "Answered";
    }

    return "Waiting";
  }
}

由服務返回

@Injectable()
export class ContactsService {

  private contactsData : BehaviorSubject<Array<Contact>> = null;

  constructor(private http: Http) {
    this.contactsData = new BehaviorSubject<Array<Contact>>([]);
  }

  /**
   * get the list of contacts
   */
  populateContacts() : Array<Contact> {
    return this.http.get('/api/contacts/').map(
      (res: Response) => {return res.json()}
    ).subscribe(
      jsonData => {
        this.contactsData.next(<Array<Contact>> jsonData);
      }
    );
  }

  onContactsChanged() : Observable<Array<Contact>>{
    return this.contactsData.asObservable();
  }

}

在組件中使用

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  private contacts: Array<Contact>  = [];

  constructor(
    private contactsApi : ContactsService
  ) { }

  ngOnInit() {
    this.contactsApi.onContactsChanged().subscribe(
      (contacts: Array<Contact>) => {this.contacts = contacts;}
    );
    this.contactsApi.populateContacts();
  }

}

並顯示在模板中

<table class="table table-striped table-bordered">
  <tr *ngFor="let contact of contacts">
    <td>
     {{ contact.getStatus() }}
    </td>
  </tr>

我收到以下錯誤

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline
template:11:8 caused by: self.context.$implicit.getStatus is not a function

我的方法有什么問題？ Angular2允許調用這樣的類方法嗎？

注意： 從模板內的Angular 2類調用方法看起來類似的問題，但沒有幫助

Answer 1

如@AdnanA所建議，該問題是強制性問題。 請參見如何在TypeScript中進行運行時類型轉換？

我通過強制轉換數組的每個對象進行了修復：請參閱https://stackoverflow.com/a/32186367/117092

// Thank you! https://stackoverflow.com/a/32186367/117092
function cast<T>(obj, cl): T {
  obj.__proto__ = cl.prototype;
  return obj;
}

@Injectable()
export class ContactsService {

  private contactsData : BehaviorSubject<Array<Contact>> = null;

  constructor(private http: Http) {
    this.contactsData = new BehaviorSubject<Array<Contact>>([]);
  }

  /**
   * get the list of contacts
   */
  populateContacts() : Array<Contact> {
    return this.http.get('/api/contacts/').map(
      (res: Response) => {return res.json()}
    ).subscribe(
      jsonData => {
        // WRONG! this.contactsData.next(<Array<Contact>> jsonData);
        // FIXED BY
        let contactsArray: Array<Contact> = [];
        for (let i=0, l=jsonData.length; i<l; i++) {
          let contact = cast<Contact>(jsonData[i], Contact);
          contactsArray.push(contact);
        }
        this.contactsData.next(contactsArray);
      }
    );
  }

  onContactsChanged() : Observable<Array<Contact>>{
    return this.contactsData.asObservable();
  }

}

Answer 2

如果數據是異步獲取的，則需要注意避免null

{{ contact?.getStatus() }}