如何解决我想将我的表单数据推送到列表中并将其显示在 mat-table 中使用 angular 12
我想将我的反应式表单数据值推送到列表中并将其显示在 mat-table 中。 目前,我的 mat-table 数据源采用这种格式。
Array(1) 0:{ 品牌: "" 颜色: "" 描述: "" 图像: "" item_name: “asd”制造商:“”其他:“”存储:“”税:“”类型:“货物” 单位:“pc”}
前端没有渲染,只显示表头
Ts 文件:
itemEntryForm:FormGroup;
imagePreview:string;
dataSource=[]
displayedColumns: string[] = ['type','name','description','unit'];
ngOnInit(): void {
this.itemEntryForm=this._formbuilder.group({
type : ['Goods'],item_name : ['',Validators.required],description : ['',unit : ['pc',})
}
addItem(){
this.dataSource.push(this.itemEntryForm.value)
// this.dataSource=this.itemEntryForm.value
console.log(this.dataSource)
}
HTML:
<table mat-table [dataSource]="dataSource" *ngIf="dataSource" class="mat-elevation-z8 mx-auto">..
解决方法
改为这样写:
@Service
这将为列表创建一个新的引用,允许 mat-table 接收更改。或者,您可以注入 ChangeDetectorRef,然后运行 .detectChanges() - 这也应该可以解决问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。