angular - 在强制转换的 Typescript 类上调用方法

Question

我正在使用 Cloud Firestore 转换到一个运行良好的对象。但是，我似乎无法调用该对象的方法。这是我的模型定义 -

contact.ts

export class Contact {
  id: string
  firstname: string
  lastname: string
  email: string

  getFullname() {
    return this.firstname + this.lastname
  }
}

contact.service.ts

@Injectable()
export class ContactService {
  getAll(raiseId: string): Observable<Contact[]> {
    this.contactsCollection = this.afs.collection<IContact>('contacts')
    this.contacts$ = this.contactsCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const contact = a.payload.doc.data() as Contact;
        const id = a.payload.doc.id;
        return { id, ...contact };
      }))
    );
    return this.contacts$;
  }
}

contact.component.ts

@Component({
  selector: 'contact-view',
  templateUrl: './contact-view.component.html',
  styleUrls: ['./contact-view.component.scss']
})
export class ContactViewComponent implements OnInit {
  contacts$: Observable<Contact[]>;
  contacts: Contact[];

  constructor(
    public contactService: ContactService
  ) { }

  ngOnInit() {
      this.contacts$ = this.contactService.getAll();
      this.contacts$.subscribe(contacts => {
        this.contacts = contacts;
      })
    })
  }
}

component.component.html

<div *ngFor="let contact in contacts">{{contact.getFullname()}}</div>

但是 getFullname() 方法只是抛出一个错误

TypeError: _v.context.$implicit.getFullname is not a function

如果有一种方法可以在强制转换对象上调用函数，有人可以解释为什么这是一个吗？

Answer 1

您不能简单地将 Firestore 返回的对象转换为任何对象并假设它会正常工作。您通过调用 data() 获得的对象只是一个普通的旧 JavaScript 对象，其属性与文档的字段匹配。就这样。它没有任何方法，将该对象转换为其他对象不会为您创建任何方法。转换只是改变了 TypeScript 对对象的定义，在这种情况下，您只是愚弄了 TypeScript，让它认为您拥有一个 Contact 实例，而实际上您并没有。

如果您想将该 Firestore 数据对象转换为联系人对象，则必须将数据对象的属性复制到新的联系人对象中。一个简单的方法是使用 Object.assign() .