角7订阅填充模型阵列

Question

我使用的是角7，我想用订阅返回填充我的数组模型。

当我这么做时：

  rsvp: RSVP[];

  constructor(private rsvpService: EventoRsvpService) { }

  ngOnInit() {
     this.rsvpService.obterListaRSVP().subscribe(
       rsvp => {
         this.rsvp = rsvp
         console.log(this.rsvp)
       }
     )
  }

我在控制台上有：

​

​

当我在*ngFor上使用它时，例如，total_confirmados可以与{{rsvp.total_confirmados}一起使用。但我的RSVP模型中没有total_confirmados。看：

export class RSVP{
    nome: string
    email: string
    totalConfirmados: number
}

这是正确的吗？还是应该在订阅返回中工作，以在适当的字段中填充它们的值？我更喜欢使用totalConfirmados ( RSVP模型)而不是total_confirmados (JSON返回)。

Answer 1

您需要转换为适当的格式。

ngOnInit() {
 this.rsvpService.obterListaRSVP().subscribe(
   rsvp => {
     this.rsvp = rsvp.map(r => ({
        nome: r.nome, 
        email: r.email,
        totalConfirmados: r.total_confirmados      
      }));
     console.log(this.rsvp)
   }
 )
}

但是，将代码重构为更好的格式(而不是订阅)是这样的：

rsvp$: Observable<RSVP[]>;

constructor(private rsvpService: EventoRsvpService) { }

ngOnInit() {
 this.rsvp$ = this.rsvpService.obterListaRSVP().pipe(
   map( rsvp => rsvp.map(r => ({
        nome: r.nome, 
        email: r.email,
        totalConfirmados: r.total_confirmados      
      }))
   ),       
 )
}

^上面的代码，第一个映射是RxJ，第二个映射是数组。

在html中

*ngFor="let rsvp of rsvp$|async"