Angular rendering before loaded data?

In Angular 9, I'm getting data from subscribe() inner forEach. I can see that my variable is loaded with data, but Angular is not rendering. I suspect that Angular is rendering before my variable is loaded.

How can I resolve it?

Called function

this.servicePromotion.list(text)
    .subscribe((res: any) => {
        this.gridList = [];

        if (res) {
          console.log('GRID LIST', this.gridList) // -> here I can show "cupom" property filled.
          this.gridList = this.mapperCalendatioStatus(res.list) // -> but when I try redering on screen, it's not shown
        }
    })

Function that loop "promocoes" and search p.id in a subscribe.

mapperCalendatioStatus(promocoes) {
    promocoes.forEach(p => {
          const promocoesStatus = [];
          let campaignExists = '';

          const consultaPromocao = new ConsultaPromocaoModel();
          consultaPromocao.id = p.id
          consultaPromocao.codigoIdentificacao = p.codigoIdentificacao;
          consultaPromocao.nome = p.nome;

          this.serviceCouponGenerate.getByIdPromocao(p.id).subscribe((response: any) => {
          if (response.length) {
            campaignExists = 'YES'
          } else {
            campaignExists = 'NO'
          }
          consultaPromocao.cupom = campaignExists;

          promocoesStatus.push(consultaPromocao);

    })

    return promocoesStatus;
}

Cupom column to be need filled

My variable filled (cupom: "SIM" for example)