Angular: Attribute is not being updated on the screen, but is in the component

Question

I am using the notation of "double mustache" to show an attribute of a component that is being updated eventually. The problem is because the data updates to the attribute in the component, but when using the data directly from that attribute, nothing is shown on the screen. Code of how the attribute is being updated on the page:

this.consumer.verificar(this.formData).subscribe({
  next: result => {
    result.registrosLidos = Math.abs(result.registrosAptos + result.registrosInconsistentes);
    this.resumo = new ResumoImportacao();
    // tentei igualar cada valor do atributo e continua nao funcionando
    this.resumo = result;
  },
  error: (err: any) => {
    console.log(err);
  }
});

Already in the HTML page:

    <div *ngIf="isVerifying; else container"
      style="display: flex; 
      justify-content: center; 
      align-items: center;">
        <mat-spinner class = "spinner-table"></mat-spinner>
      </div>
      <ng-template #container>
        <form [formGroup]="thirdFormGroup">
          <mat-form-field class="medium">
            <mat-label>Arquivo</mat-label>
            <input matInput name="arquivo" formControlName="arquivo" readonly>
          </mat-form-field>
        </form>
        <p><b>Validações do processamento</b></p>
        Tipo de arquivo (.XLS) {{this.resumo?.tipoArquivo?.includes('XLS') ? 'Ok' : 'Não'}}
        Leiaute do arquivo {{this.resumo?.isValid? 'Ok' : 'Não'}}
        Registros lidos: {{this.resumo?.registrosLidos}}
        Registros aptos para importação:{{this.resumo?.registrosAptos}}
        Registros inconsistentes:{{this.resumo?.registrosInconsistentes}}

Answer 1

Hello, try to remove the this. from within the {{ }}, and check that the summary variable is in the scope of the component. When the variable is called by HTML there is no need to use this.