angular - 列出组件更新,同时在角度 7 中从其他组件发布新记录
问题描述
我正在做一个 Angular 7 项目。我有两个组件,一个是添加角色和列表角色。这两个组件元素放在其他角色组件中。当我通过添加角色组件添加新记录时,如何在不刷新的情况下在列表角色组件中显示新数据?
非常感谢任何帮助...
角色.component.html
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<add-role></add-role>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<list-role></list-role>
</div>
添加角色.component.ts
import { Component, OnInit } from '@angular/core';
import { UsersService } from '../../_services/users.service';
import { ToastrService } from 'ngx-toastr';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { Role } from '../../_models/Role';
import { first } from 'rxjs/operators';
@Component({
selector: 'app-add-role',
templateUrl: './add-role.component.html',
styleUrls: ['./add-role.component.sass']
})
export class AddRoleComponent implements OnInit {
public roleModel = {};
roles: Role[] = [];
constructor(private userService: UsersService, private toastr: ToastrService, private router: Router) { }
ngOnInit() {
}
onSubmit(roleForm: NgForm) {
this.userService.addRole(this.roleModel).subscribe(
res => {
this.toastr.success(res.message, "Success!");
roleForm.form.reset();
},
err => {
this.toastr.error(err, "oops!");
}
)};
}
列表角色.component.ts
import { Component, Input, OnInit} from '@angular/core';
import { Role } from '../../_models/Role';
import { UsersService } from '../../_services/users.service';
import { ToastrService } from 'ngx-toastr';
import { first } from 'rxjs/operators';
@Component({
selector: 'app-list-role',
templateUrl: './list-role.component.html',
styleUrls: ['./list-role.component.sass']
})
export class ListRoleComponent implements OnInit {
roles: Role[] = [];
constructor(private userService: UsersService, private toastr: ToastrService) { }
ngOnInit() {
this.getRoles();
}
getRoles(){
this.userService.listroles().pipe(first()).subscribe(roles => {
this.roles = roles;
});
}
}
解决方案
在这种情况下,我会使用异步管道。您可以在此处查看文档
您有三个组件,一个父亲 (RoleComponent) 和两个孩子 (ListRoleComponent 和 AddRoleComponent)。
最好从 AddRoleComponent 向 RoleComponent 发出事件以警告插入了新角色。然后你可以再次要求角色。我的代码是这样的:
角色.component.html
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<app-add-role (formSubmited)="onFormSubmited($event)"></app-add-role>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<app-list-role [roles]="(roles | async)?.roles"></app-list-role>
</div>
角色.component.ts
export class ProfileComponent implements OnInit {
roles: Observable<Role[]>;
constructor(private userService: UsersService) {
}
ngOnInit() {
this.getRoles();
}
getRoles() {
this.roles = this.userService.listRoles();
}
onFormSubmited(e) {
this.getRoles();
}
}
list-role.component.html(短版)
<div style="color: red" *ngFor="let r of roles">
{{ r.name }}
</div>
列表角色.component.ts
export class ListRoleComponent implements OnInit {
@Input() roles: Role[];
constructor() { }
ngOnInit() {
}
}
**add-role.component.html(短版)**
<button (click)="onSubmit()">Adicionar</button>
添加角色.component.ts
export class AddRoleComponent implements OnInit {
public roleModel = {
name: 'Nuevo'
};
roles: Role[] = [];
@Output() formSubmited = new EventEmitter<boolean>();
constructor(private userService: UsersService, private router: Router) { }
ngOnInit() {
}
onSubmit(roleForm: NgForm) {
this.userService.addRole(this.roleModel).subscribe(
res => {
// this.toastr.success(res.message, "Success!");
// roleForm.form.reset();
this.formSubmited.emit(true); // important
},
err => {
// this.toastr.error(err, "oops!");
}
);
}
}
在服务中,方法是:
listroles(): Observable<Role[]> {
return this.http.get<Role[]>(this.url);
}
addRole(roleModel): Observable<any> {
const params = JSON.stringify(roleModel);
const headers = new HttpHeaders().set('Content-Type', 'application/json');
return this.http.post<Role>(this.url + '/add', params, {headers});
}
您可以看出我在模型角色(名称)中添加了一个字段。你可以继续你的逻辑,这只是我重新创建的一个例子
推荐阅读
- javascript - 从打字稿中的索引文件导出JSON文件
- python - 仅当连续出现小于或等于三倍的特定值时才替换数据框列中的行
- git - 如何获取部分 git 存储库?
- c# - 如何在 C# .NET Core 中将字符串转换为对象?
- botframework - BotFrameworkAdaptor.useWebSocket vs BotFrameworkAdaptor.processActivity?有什么不同吗?
- python-3.x - 二维高斯梯度作为矢量颤动图
- makefile - 将 make 与 Ansible 一起使用时是否可以设置标志?
- java - 放心:从 JSON 中提取价值
- mysql - 我的 MYSQL my.cnf 文件上不包含绑定地址,当我将它放入文件时,它不起作用
- .net - linux容器下使用perf无法解析的net5.0 CLR符号