Typescript Angular variable empty in component

Question

I have a web page with a loop calling a component like 10 times. I pass data to my component and it works. But here's my problem. In my component I want print the object value but it's always empty.

In my component HTML:

<div>
   Name: {{ teamInfo.name }}
</div>
<div>
   <mat-table [dataSource]="List" class="mat-elevation-z8">
      <ng-container matColumnDef="ronde">
        <mat-header-cell *matHeaderCellDef matTooltip="Ronde">rd</mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.ronde }}</mat-cell>
        <mat-footer-cell *matFooterCellDef> </mat-footer-cell>
      </ng-container>
   </mat-table>
</div>

Everything works fine for the mat-table because this data is received in the Init code.

To help the code to be clear, I go directly without database access.

the .ts file:

export class MyComponent implements OnInit {
  teamInfo:  TeamObject;

  @Input() List: DraftList;

  constructor() {}

  ngOnInit() {
    console.log("DraftList", this.List);
    this.getConcessionInfo();
  }

  public getConcessionInfo() { 
    this.teamInfo.name ="TeamName";
    console.log(this.teamInfo.name);
  }

}

The problem is: I have my code working correctly in the .ts code (Console log have data, like this one: console.log(this.teamInfo.name); )

But in HTML component , this line is empty : Name: {{ teamInfo.name }}

Data receive in the @Input are print correctly in the HTML. I'm new in this king of programming. Can someone see why my variable is not print in the HTML ?

Thanks

sorry I try something. I will remove the async. Forget to remove it when I made the post — baronming
– baronming, Commented Mar 22, 2020 at 16:39

Suraj · Accepted Answer · 2020-03-22 17:34:13Z

1

// second solution

teamInfo = new TeamObject();

ngOnInit() {
  this.getConcessionInfo();
}

public async getConcessionInfo() {
  this.teamInfo.name = "TeamName";
  console.log(this.teamInfo.name);
}

answered Mar 22, 2020 at 17:34

Suraj

612 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

baronming Over a year ago

My question was about the PRINT value in the HTML. Your code gives me the same thing. I want to know why the HTML doesn't print the value? have you test your result ? thanks

Suraj Over a year ago

yes i have tried this and it will rendrer into browser as well see example

Suraj Over a year ago

plnkr.co/edit/xkvMFANv9HbJS21p?open=lib%2Fapp.ts&deferRun=1

Suraj Over a year ago

both the solutions you can try

Suraj · Accepted Answer · 2020-03-22 17:30:56Z

1

I hope it will work thanks.

  teamInfo: TeamObject;

  ngOnInit() {
    this.getConcessionInfo();
  }

  public async getConcessionInfo() {
    this.teamInfo = Object.assign(new TeamObject, this.teamInfo);
    this.teamInfo.name = "TeamName";
    console.log(this.teamInfo.name);
  }

first solution

answered Mar 22, 2020 at 17:30

Suraj

612 bronze badges

1 Comment

baronming Over a year ago

My question was about the PRINT value in the HTML. Your code gives me the same thing. I want to know why the HTML doesn't print the value? have you test your result ? thanks

Collectives™ on Stack Overflow

Typescript Angular variable empty in component

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related