Angular Expression Not evaluated

I am new using angular and I am trying to bind a label into a property model, the thing is that it only works fine the first time, when my label is between 2 inputs it does not show anything, pease find the <--- DOES NOT WORK, I am not sure why if it is the same as the first one. please help

home.html

<div>
<form (ngSubmit)="onSubmit()">

{{partidosOficialesList[0].equipo1}} <---works!
{{partidosOficialesList[0].equipo2}} <---works!

<label>Nombre:</label><input [(ngModel)]="quinielaModel.name" type="text" placeholder="Escribe el Nombre" name="nameInput"/>
<label>Casa:</label> <input [(ngModel)]="quinielaModel.homeNumber" type="text" name="homeNumber" placeholder="Numero de casa"/><br/><br/>
<label for="equipo1">{{partidosOficialesList[0].equipo1}}</label> <---works!<input size="5" [(ngModel)]="quinielaModel.partidos[0].equipo1.result" type="text" name="text1" id="equipo1"/><label for="equipo2">{{partidosOficialesList[0].equipo2}}</label><---DOES NOT WORK!<input size="5" [(ngModel)]="quinielaModel.partidos[0].equipo2.result" type="text" name="value1" id="equipo2"/><br />

<button type="submit">Submit</button>
</form>
</div>


and this is my home.ts

@Component({
selector: 'app-home',
standalone: false,
templateUrl: './home.html',
styleUrl: './home.scss'
})
export class Home {

partidosOficialesListartidosOficiales[] = []

ngOnInit(): void {
this.getPartidosOficiales();
}
constructor(private http:HttpClient){

}

getPartidosOficiales(){
this.http.get("http://localhost:8080/v1/partidosoficiales").subscribe((result:any)=>{
this.partidosOficialesList = result;
})
}}

Continue reading...