Question

最初，我将使用HTML和文本框显示此数组中的学生详细信息。

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>

现在我从数组中获取2个学生详细信息

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

现在我需要的是学生姓名与该姓名的学生数组匹配，然后标记将显示在特定的文本字段中

我得到了这个链接，但是他把数组中的空对象带走了。 https://www.fileformat.info/info/unicode/char/1f603/index.htm

我觉得这不是正确的方法。任何人，请帮助。

Answer 1

在这里，您需要将学生姓名与studentDetails个对象数组和return匹配的学生标记相匹配，如下所示。

示例

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

Answer 2

您可以事先绑定Marks字段，然后当学生详细信息来自DB时，只需按如下所示进行更新

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>

一旦从数据库中获取数据，您只需要更新原始暂定阵列并更新其中的标记

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

由于这里使用两种方式的数据模型..一旦模型更新，您的html就会更新

注意：但是请确保名称是唯一字段，通常应为ID

Answer 3

在component.html上添加以下代码：

<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>

如何在Angular 5中显示匹配的数据

3 个答案: