Typescript角度变量在组件中为空

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>

由于该数据是在初始化代码中接收的，所以一切对于该垫子表都适用。

为了使代码更清晰，我直接访问而没有数据库访问权限。

。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组件中，此行为空：名称：{{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