Typescript Angular变量在组件中为空

Question

我有一个网页，其中循环调用一个组件 10 次。我将数据传递给我的组件并且它可以工作。但这是我的问题。 在我的组件中，我想打印对象值，但它始终为空。

在我的组件 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>

mat-table 一切正常，因为这些数据是在 Init 代码中接收的。

为了让代码更清晰，我直接不访问数据库。

.ts 文件：

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);
  }

}

问题是：我的代码在 .ts 代码中正常工作（控制台日志有数据，例如：console.log(this.teamInfo.name);）

但是在 HTML 组件中，这一行是空的： Name: {{ teamInfo.name }}

@Input 中接收的数据在 HTML 中正确打印。 我是这个编程之王的新手。有人可以看到为什么我的变量不在 HTML 中打印吗？

谢谢

Answer 1

//第二种解决方案

teamInfo = new TeamObject();

ngOnInit() {
  this.getConcessionInfo();
}

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

Answer 2

我希望它会起作用，谢谢。

  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