我想做的是更新我的界面，其中包含一些用户信息，然后当更改时，我希望结果反映在HTML输出上。
在我的HTML页面上，我有一个输入，允许用户添加额外的注释。这一切都很好，但是，用户输入实际上并没有显示在页面上，而是对我的界面进行了必要的更改。
在下面的HTML文件中，用户将在输入中键入一些内容。然后会保存到我的界面中也就是每个学生的数据，然后在这里可以看到<p>{{the students.grades}}<p>
<div class='studentCard' *ngFor='let student of students | studentSearch: StudentSearch'>
<img class='studentImg' src={{student.pic}}/>
<div class='studentInfo'>
<h1>{{student.name | uppercase}}</h1>
<div class='loca'>
<p>Email: <span>{{student.email}}</span></p>
<p>Company: <span>{{student.company}}</span></p>
<p>Skill: <span>{{student.skills}}</span></p>
<p>Average: <span>{{student.average}}</span></p>
<mat-expansion-panel [hideToggle]='true' [expanded]='true'>
<p>{{student.grades}}</p>
</mat-expansion-panel>
<p>{{student.tags}}</p>
<mat-form-field>
<input matInput (keyup.enter)='add(student.id)' placeholder="Add a tag"></mat-form-field>
</div>
</div>
<div class='expand'><span class='material-icons'>add</span></div>
</div>
这段代码来自我的组件。ts文件。现在我只是试着传递一些虚假的信息来看看它是否有效。我可以看到它正确地更新了接口。
import { Component, OnInit } from '@angular/core';
import { Student } from '../student'
import { StudentsService } from '../students.service';
@Component({
selector: 'app-student-profiles',
templateUrl: './student-profiles.component.html',
styleUrls: ['./student-profiles.component.scss']
})
export class StudentProfilesComponent implements OnInit {
//implementing an interface to control the data and make it easy to access
students: Student[] = [];
StudentSearch=''
TagSearch=''
constructor(
private service: StudentsService
) { }
ngOnInit(): void {
this.service.getStudents().subscribe(
result=>result['students'].map(
x=>{this.students.push(
{
name:x.firstName+' '+x.lastName,
grades:x.grades,
average:this.computeAvg(x.grades),
company: x.company,
email: x.email,
pic: x.pic,
id: x.id,
skills: x.skill,
tags:[]
});
}
)
)
}
//find the average of all the scores of each student. Calculates the total, then devides by the length of scores array.
computeAvg(x){
let total=0
x.map(score=>{total=total+Number(score)})
return(total/x.length)
}
add(id){
this.students[id-1]['tags'].push(String('100'))
console.log(this.students[id-1])
}
}
这是我使用的数据接口:
name: string;
grades: number[];
average: number;
company: string;
pic: string;
email: string;
id: number;
skills: string;
tags: string[];
}
我不明白的是，如果我使用相同的代码，但我把它从'tags'改为'email'，那么它确实在HTML中出现更新。
Angular变更检测通过比较模板中存在的属性的新旧值来工作。
如果你仔细观察你的接口，你会发现email属性是一个字符串，而tags属性是一个数组。
当你改变email的值时，Angular能够知道这个原语类型的新旧值是不同的，然后更新视图。
当你向标签数组中添加一个新标签时，对该数组的引用不会改变——它只会改变它的内容，所以Angular不会检测到它，因此也不会更新视图。
在这种情况下，一个非常简单的解决方案是在添加新标签后创建一个新数组，以便引用更改，您可以使用splice或spread操作符:
array.slice()
or
[...array]
考虑到你正在复制数组
当引用没有改变，并且需要一个副本时，Angular变更检测的同样行为也适用于对象类型。
其他一些web框架(如React)使用不可变范式使这些事情更容易理解和避免陷阱。
关于Angular变更检测的更多信息:
https://dzone.com/articles/how-to-use-change-detection-in-angular: ~:文本=改变% 20检测% 20意味着% 20更新% 20,探测器% 20 % 20更新% 20 % 20 dom。
只需添加一个模型类。将API的响应获取到模型中。当有变化时，只需调用API并用新结果更新模型。Angular的变更检测发生在你更新模型的时候，而不是你追加模型的时候。