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

最初，我用HTML和文本框显示这个数组中的学生详细信息

组件。ts

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

  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" [name]="'name'+i" >
</div>

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

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

我得到了这个链接，但他拿走了数组中的空对象。

我觉得这不是正确的方法。

---

任何人，请帮助。

这里您需要将学生姓名与

studentDetails

对象数组匹配，并

返回

匹配的学生分数，如下所示

示例

组件。ts

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

  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" [name]="'name'+i" >
</div>

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

{{x.name}

---

您可以先绑定分数字段，然后当学生详细信息来自DB时，只需按如下方式更新它

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

HTML

因为这里使用的是双向数据模型。。您的html将在模型更新后更新

---

注意：但请确保名称是唯一字段，通常它应该是component.html上的Id添加以下代码：

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

---

请在此处检查答案和解决方案