Styjun

Initially, I am displaying student details from this array in HTML along with a text box.

component.ts

students=[id:1,name:"john", id:2,name:"dublin",
 id:3,name:"bhaskar",id:4,name:"robert"]

component.html

<div *ngFor="let x of students;let i=index">
x.name
<input type="text" [name]="'name'+i" >
</div>

Now I am getting 2 student details from database in an array

studentDetails=[name:"john",marks:50,name:"robert",marks:100]

Now what I need is student name is matched with students array of the name then the marks will display in the particular text field

I got this link but he took empty objects in the array.
stackblitz

I feel this is not the correct way.
Anyone, please help.

Here you need to match the student name with studentDetails array of objects and return the match student marks like below.

Example

component.ts

 getStudentMarks(studentName) : number 
 let marks = 0;
 this.studentDetails.forEach(details => 

 if (studentName == details.name) 
 marks = details.marks;
 
 )
 return marks;
 

component.html

<div *ngFor="let x of students;let i=index">
 x.name
 <input type="text" [value]="getStudentMarks(x.name)" >
</div>

Here is solution on stackblitz

You can bind Marks field before hand and then when student details come from DB just update it like below

students=[id:1,name:"john",id:2,name:"dublin",id:3,name:"bhaskar",id:4,name:"robert"]

HTML

<div *ngFor="let x of students;let i=index">
x.name
<input type="text" [name]="'name'+i" [(ngModel)]="x.marks">
</div>

once you get data from DB you just need to update original stident array and update marks in that

studentDetails=[name:"john",marks:50,name:"robert",marks:100]

for(let student of studentDetails) 
 let matchedStudent= students.find(w=>w.name === student.name);
 if(matchedStudent)
 
 matchedStudent.marks=student.marks;
 
 

Since here using two way data model .. your html will update once model get updated

Note: But make sure name is unique field, generally it should be Id

on component.html add following code:

<div *ngFor="let x of students;let i=index">
 <div *ngFor="let j of studentDetails">
 <input *ngIf="x.name == j.name" type="text" [name]="'name'+i" 
 [value]="j.marks">
 </div>
</div>