要在Angular 7中在ts文件中更改变量值并保持html中的更新,你可以使用Angular的双向数据绑定机制。以下是一个示例解决方法:
在组件的ts文件中定义一个变量,并将其绑定到html模板中的一个元素上。例如,假设你有一个名称为"message"的变量:
// 在组件的ts文件中
export class YourComponent {
message: string = '初始值';
}
在html模板中,使用双向数据绑定将该变量绑定到一个输入框(或其他元素)上:
{{ message }}
现在,无论你在ts文件中如何更改"message"变量的值,html模板中绑定的元素都会自动更新。
例如,你可以在组件的某个方法中更改"message"的值:
// 在组件的ts文件中
export class YourComponent {
message: string = '初始值';
updateMessage() {
this.message = '更新后的值';
}
}
然后,在html模板中调用该方法来更改变量的值:
{{ message }}
当你点击"更改值"按钮时,"message"的值将更新为"更新后的值",并且html模板中绑定的元素将自动更新以反映该变化。
请注意,要使用双向数据绑定,你需要在你的组件中导入FormsModule。确保在你的模块文件中导入它:
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
// ...
})
export class YourModule { }
这样,你就可以在ts文件中更改变量值并保持html中的更新了。