I'm encountering an issue on my web page where I have a loop calling a component multiple times. I successfully pass data to the component, but the problem arises when I try to display the value of an object in the component. In the component's 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>
Even though everything works fine for the mat-table because the data is received in the Init code, I am facing issues when it comes to directly manipulating the data without database access in 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);
}
}
Although the console log in the .ts file displays the correct data (e.g. console.log(this.teamInfo.name); ), when I try to print the variable in the HTML component, the line is empty: Name: {{ teamInfo.name }}
The data received in the @Input are printed correctly in the HTML. As a novice in this type of programming, I'm seeking assistance in identifying why my variable is not being displayed in the HTML. Any insights would be greatly appreciated. Thank you.