Angular:如何刷新html的一部分(form/div/table)

Question

我有一个用于创建操作的页面。在我的页面中，我有一个包含2个字段的表单。如果我重新加载页面(或代码window.reload(，我可以看到该表单中的更新。但我想通过点击按钮来触发表单刷新。

因此，请帮我写一个函数，可以刷新表单(或任何其他html元素，如tabe/paragraph等(

.html我的表单：

<form class="was-validated" #zoneForm=ngForm id=#zoneForm>
<div class=container>
<div class="row justify-content-center">
<div class="col-5">
<div class="card" style="width: 35rem;">
<div class="card-header">
<div class="row">
<div class="col-11">
Zone Entry
</div>
<div class="col-1">
<i style="margin-left: -1rem;" class="fa fa-arrow-circle-o-right" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="card-body">
<div class="row mb-1">
<div class="col-12">
<input [(ngModel)]="code" name="code" type="number" class="custom_form_control custom input" placeholder="ID" style="padding: 0px;"
disabled>
</div>
</div>
<div class="row mb-1">
<div class="col-12">
<input [(ngModel)]="zonename" name="zonename" type="text" class="custom_form_control custom-input" placeholder="Zone Name" required>
<i class="fa fa-user" style="margin-left: -1rem;font-size: 1rem; color:black;margin-top: 0.25rem;"></i>
</div>
</div>
<div class="row ">
<div class="col-12 ">
<button type="button " class="btn btn-outline-primary" style="margin-left: 90%; " (click)="createZone()">Save</button>
</div>
</div>
</div>

<!-- </div> -->
</div>
</div>
</div>
</div>

</form>

该函数应通过点击保存按钮调用

Answer 1

您可以使用ngOnChanges()

示例：component.ts文件

import { Component, Input, OnChanges } from "@angular/core";
@Component({
selector: "child-component",
templateUrl: "./child-component.html"
})
export class MyComponent implements OnChanges {
@Input() someHtml: string;
constructor() {}
ngOnChanges() {
///** WILL TRIGGER WHEN PARENT COMPONENT UPDATES '**
console.log(this.someHtml);
}   

}

Answer 2

我建议您使用ReactiveFormModule，因为它功能强大，是在Angular中使用Forms的最佳方式：

表单示例：

组件.ts

public myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = fb.group({
one: [],
two: []
})
}
submit() {
this.myForm.reset()
}

component.html

<form [formGroup]="myForm" (ngSubmit)="submit()">
<input formControlName="one" type="text"/>
<input formControlName="two" type="text"/>
<button type="submit">Submit!</button>
</form>

我建议您查看Angular Reactive Form文档：https://angular.io/guide/reactive-forms

看看这个例子：https://stackblitz.com/edit/angular-ivy-zevbtg?file=src/app/app.component.html

您应该记住，ngModel将被弃用，以便在下一个版本中使用表单。。。

Answer 3

请在不刷新页面的方法中使用ngOnInit((。

import { Component, Input, OnInit} from "@angular/core";
@Component({
selector: "my-component",
templateUrl: "./my-component.html"
})
export class MyComponent implements OnInit {
@Input() someHtml: string;
constructor() {}
ngOnInit(){}    
createZone(){
this.ngOnInit();
}
}

Answer 4

public myForm: FormGroup;
constructor(private fb: FormBuilder, private http: HttpClient) {}
ngOnInit(){
this.myForm = fb.group({
one: [],
two: []
})
}
submit() {
this.http.post().subscribe(
(data) => {
this.ngOnInit();
console.log(data);
this.myForm.reset()
})

}

Answer 5

我有一个场景，在调用打印方法之前，我需要更新一个HTML结构，该结构使用布尔值来显示页面的一部分。

<div id="div">
<component [showLast]="isPrint"></component>
</div>
print() {
const selectionHtml: HTMLElement = document.getElementById('div');
this.isPrint = true; //Boolean I used to change the component inside the div
selectionHtml.onload
setTimeout(() => {
PrintUtil.print('page');
this.isPrint = false;
selectionHtml.onload;
}, 100);
}