Angular:如何刷新html的一部分(表格/div/table)
Angular: How to refresh a part of html ( form / div / table )
我有一个用于创建操作的页面。在我的页面中,我有 1 个带有 2 个字段的表单。如果我重新加载页面(或通过代码 window.reload
),我可以看到该表单的更新。但我想通过单击按钮触发表单刷新。
所以请帮我写一个可以刷新表单的函数(或任何其他 html 元素,如 tabe/paragraph/etc。)
.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>
应通过单击 保存 按钮调用该函数
你可以使用 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);
}
}
我推荐你使用 ReactiveFormModule,因为它非常强大,而且它是在 Angular:
中使用表单的最佳方式
表单示例:
component.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 以处理表单...
请在不刷新页面的方法中使用 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();
}
}
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()
})
}
我有一个用于创建操作的页面。在我的页面中,我有 1 个带有 2 个字段的表单。如果我重新加载页面(或通过代码 window.reload
),我可以看到该表单的更新。但我想通过单击按钮触发表单刷新。
所以请帮我写一个可以刷新表单的函数(或任何其他 html 元素,如 tabe/paragraph/etc。)
.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>
应通过单击 保存 按钮调用该函数
你可以使用 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);
}
}
我推荐你使用 ReactiveFormModule,因为它非常强大,而且它是在 Angular:
中使用表单的最佳方式表单示例:
component.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 以处理表单...
请在不刷新页面的方法中使用 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();
}
}
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()
})
}