无法从弹出窗口中的表行绑定数据
[英] Unable to bind the data from the table row in the popup
本文介绍了无法从弹出窗口中的表行绑定数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
account.component.ts:
import {Component, ViewChild, Inject, OnInit} from '@angular/core';从'@angular/forms'导入{FormControl}；从 'rxjs/Observable' 导入 { Observable };导入 'rxjs/add/operator/map';从'@angular/forms'导入{ReactiveFormsModule}；从@angular/forms"导入{FormGroup}；从@angular/material"导入 {MatPaginator, MatTableDataSource}；从'@angular/material/dialog' 导入 { MAT_DIALOG_DATA, MatDialogRef, MatDialog };从 '../accountdetail.service' 导入 { AccountdetailService };@成分({选择器:'应用程序帐户'，templateUrl: './account.component.html',styleUrls: ['./account.component.scss']})导出类 AccountComponent 实现 OnInit {过滤文本:字符串；部门:任何；acc_id:任何；acno: 任何;构造函数(公共对话:MatDialog，私人accdetailservice:AccountdetailService){}/* 弹出代码从这里开始 */openDialog(行):无效{让 dialogRef = this.dialog.open(UpdateAccountAttributesComponent, {宽度:'600px'，高度:'850'，数据:{行}});dialogRef.afterClosed().subscribe(result => {row = result;});console.log('点击行:', row);}/* 表格从这里开始--------------- */displayColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];dataSource1= new MatTableDataSource(ELEMENT_DATA);应用过滤器(过滤器值:任何){filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource1.filter = filterValue;}ngOnInit(){this.accdetailservice.accountdetails().订阅(数据=> {this.departments = 数据；//添加这一行this.dataSource1.data = 数据；});}@ViewChild(MatPaginator) 分页器:MatPaginator；ngAfterViewInit() {this.dataSource1.paginator = this.paginator;}@ViewChild('form') 表单；重启() {this.form.nativeElement.reset()}}const ELEMENT_DATA: 元素[] = [];/*更新账户属性组件从这里开始*/@成分({选择器:'app-updateAccountAttributes'，templateUrl: './updateAccountAttributes.html'})导出类 UpdateAccountAttributesComponent {构造函数( public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) 公共数据:任何，私人 accdetailservice: AccountdetailService ) { }控制台日志(数据)；选择部门:字符串；selectedloc:字符串；选定的调查员:字符串；选定的cpc:字符串；过滤文本:字符串；部门:字符串；调查员:字符串；位置:字符串；每次点击费用:字符串；/*从服务订阅数据*/ngOnInit(){this.accdetailservice.accountdetails().subscribe(data => this.investigator = data);this.accdetailservice.accountdetails().subscribe(data => this.CPC = data);this.accdetailservice.accountdetails().subscribe(data => this.location = data);this.accdetailservice.accountdetails().subscribe(data => this.departments = data);} }
account.component.html:
欢迎</mat-toolbar><br/><表格#form><表格><tr><td>帐户 ID<td><mat-form-field><input matInput (keyup)="applyFilter($event.target.value)" placeholder="账户ID" ></mat-form-field><br/></td>    <td>部门</td><td><mat-form-field ><mat-select style="min-width: 200px;"placeholder="要搜索的类型" [(value)]="部门"><input class="input1" matInput type="text" [(ngModel)]="filtertext" name="department" (change)="applyFilter($event.target.value)"><mat-option *ngFor="let dep of Department | filter : filtertext" [value]="dep.department" >{{ 部门}}</mat-option></mat-select></mat-form-field></td></tr></表单><br/><br/><button mat-raised-button color="primary" (click)="reset()">重置</button><!-- 表格从这里开始--><垫卡><div class="example-container mat-elevation-z8"><mat-table #table [dataSource]="dataSource1"><!-- 账号栏--><ng-container matColumnDef="acc_id"><mat-header-cell *matHeaderCellDef>帐户ID.</mat-header-cell><mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell></ng-容器><!-- 账户描述栏--><ng-container matColumnDef="acc_des"><mat-header-cell *matHeaderCellDef>账户描述 </mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.acc_des}}</a></mat-cell></ng-容器><!-- 调查员栏--><ng-container matColumnDef="调查员"><mat-header-cell *matHeaderCellDef>调查员</mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.investigator}}</a></mat-cell></ng-容器><!-- 帐户每次点击费用列 --><ng-container matColumnDef="CPC"><mat-header-cell *matHeaderCellDef>帐户每次点击费用 </mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.CPC}}</a></mat-cell></ng-容器><!-- 位置列--><ng-container matColumnDef="location"><mat-header-cell *matHeaderCellDef>位置</mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.location}}</a></mat-cell></ng-容器><!-- 客户部门 ID 列 --><ng-container matColumnDef="dept_id"><mat-header-cell *matHeaderCellDef>DeptID </mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.dept_id}}</a></mat-cell></ng-容器><!-- 部门描述栏--><ng-container matColumnDef="deptdesc"><mat-header-cell *matHeaderCellDef>部门描述</mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.deptdesc}}</a></mat-cell></ng-容器><mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row><mat-row *matRowDef="让行；列:displayColumns1;"(点击)="openDialog(row)"></mat-row></mat-table><mat-paginator #paginator[页面大小]="10"[pageSizeOptions]="[5, 10, 20]"></mat-paginator>
</mat-card>
updateAccountAttributes.html:
<span matTooltip="Back" style="margin-left:15px;"><button mat-mini-fab><i class="material-icons" (click)="dialogRef.close()">取消</i></button></span></mat-toolbar><!-- 标题为 PopUp --><垫卡><mat-card-title class="cardHeader">更新账户属性</mat-card-title><mat-card-content><!-- 弹出窗口中的输入和下拉菜单 --><表格><tr><td class="inputs">帐户 ID </td><td><mat-input-container class="fullwidth" floatPlaceholder="never"><input matInput placeholder="" id="empname" name="empname"></mat-input-container></td></tr><tr><td class="inputs">账户描述 </td><td><mat-input-container class="fullwidth" floatPlaceholder="never"><input matInput placeholder="" id="empname" name="empname"></mat-input-container></td></tr><tr><td class="inputs">调查员</td><td><mat-form-field floatPlaceholder="never"><mat-select placeholder="" [(value)]="this.investigator"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="让调查员的投资 | filter:filtertext " [value]="inves.investigator">{{ inves.investigator}}</mat-option></mat-select></mat-form-field></td></tr><tr><td class="inputs">帐户每次点击费用 </td><td><mat-form-field floatPlaceholder="never"><mat-select placeholder="" [(value)]="selectedcpc"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="let cpc of CPC | filter:filtertext " [value]="cpc.CPC">{{ cpc.CPC }}</mat-option></mat-select></mat-form-field></td></tr><tr><td class="inputs">位置 </td><td><mat-form-field floatPlaceholder="never"><mat-select placeholder="" [(value)]="selectedloc"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="let loc of location | filter:filtertext " [value]="loc.location">{{ loc.location}}</mat-option></mat-select></mat-form-field></td></tr><tr><td class="inputs">部门 </td><td><mat-form-field floatPlaceholder="never" ><mat-select placeholder="" [(value)]="selecteddept"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="让部门的部门| filter:filtertext " [value]="dep.department" >{{ 部门}}</mat-option></mat-select></mat-form-field></td></tr><!-- 弹出窗口的按钮 --><div style="text-align:center; padding-top:20px;"><button mat-raised-button color="primary">保存</button>    <button mat-raised-button color="primary" (click)="dialogRef.close()">关闭</button>
</mat-card-content><!-- PopUp 的内部样式表 --><风格>.cardHeader{字体系列:Verdana，无衬线；字体大小:16px；字体粗细:粗体；颜色:#1a084c；文字对齐:居中；}.输入{字体系列:Verdana，无衬线；字体大小:11px；字体粗细:粗体；颜色:#0c0c28；左边距:50px；宽度:150px；}.input1{宽度:100%；高度:30px；边框:2px 纯灰色；背景色:#cbd1db;字体大小:12px；字体系列:Verdana，无衬线；}.mat-raised-button{边框半径:15px；}垫表单字段，垫输入容器{左边距:80px；宽度:250px；高度:35px；边距顶部:-10px;字体大小:12px；字体系列:Verdana，无衬线；}垫选择{边距顶部:-5px；宽度:250px；字体大小:12px；字体系列:Verdana，无衬线；}</风格></mat-card>
app.module.ts:
import { NgModule } from '@angular/core';从'@angular/platform-browser' 导入 { BrowserModule };从@angular/platform-browser/animations"导入 { BrowserAnimationsModule };从'@angular/forms'导入{ReactiveFormsModule}；从 './filter.pipe' 导入 { FilterPipe };从'@angular/forms'导入{FormsModule}；从'@angular/http'导入{HttpModule}；import { AppMaterialModule } from './app-material.module';import { AppRoutingModule } from './app-routing.module';从 './app.component' 导入 { AppComponent };import { AccountComponent,UpdateAccountAttributesComponent } from './account/account.component';从 './accountdetail.service' 导入 { AccountdetailService };导入'./rxjs-operators';@NgModule({声明: [应用组件，AccountComponent ,UpdateAccountAttributesComponent,过滤管],进口:[浏览器模块，应用路由模块，反应形式模块，浏览器动画模块，应用材料模块，表单模块，Http模块],entryComponents:[UpdateAccountAttributesComponent],提供者:[AccountdetailService]，引导程序:[AppComponent]})导出类 AppModule { }
这里我更新了 account.component.ts account.component.html 和 updateAccountAttributes.html 文件.
在 account.component.html 文件中，我在下面的行中添加了一个 opendialog(row) 方法...
**<mat-row *matRowDef="让行；列:displayColumns1;"(点击)="openDialog(row)"></mat-row>**
我在 account.component.ts 文件中调用了这个方法并在控制台中显示了行数据.
并使用 updateAccountAttributes.html 文件打开此对话框...
我可以在对话框中获取数据...但是我如何在弹出视图中访问特定的元素数据....
请帮助解决这个问题.......
解决方案
我修改了文件如下...
account.component.ts
import {Component, ViewChild, Inject, OnInit} from '@angular/core';从'@angular/forms'导入{FormControl}；从 'rxjs/Observable' 导入 { Observable };导入 'rxjs/add/operator/map';从'@angular/forms'导入{ReactiveFormsModule}；从@angular/forms"导入{FormGroup}；从@angular/material"导入 {MatPaginator, MatTableDataSource}；从'@angular/material/dialog' 导入 { MAT_DIALOG_DATA, MatDialogRef, MatDialog };从 '../accountdetail.service' 导入 { AccountdetailService };@成分({选择器:'应用程序帐户'，templateUrl: './account.component.html',styleUrls: ['./account.component.scss']})导出类 AccountComponent 实现 OnInit {过滤文本:字符串；部门:字符串；构造函数(公共对话:MatDialog，私人accdetailservice:AccountdetailService){}/* 弹出代码从这里开始 */openDialog(行):无效{让 dialogRef = this.dialog.open(UpdateAccountAttributesComponent, {宽度:'600px'，高度:'850'，数据:{行}});dialogRef.afterClosed().subscribe(result => {row = result;});console.log('点击行:', row);}/* 表格从这里开始--------------- */displayColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];dataSource1= new MatTableDataSource(ELEMENT_DATA);应用过滤器(过滤器值:任何){filterValue = filterValue.trim();//去除空格filterValue = filterValue.toLowerCase();//MatTableDataSource 默认为小写匹配this.dataSource1.filter = filterValue;}ngOnInit(){this.accdetailservice.accountdetails().订阅(数据=> {this.department = 数据；//添加这一行this.dataSource1.data = 数据；});}@ViewChild(MatPaginator) 分页器:MatPaginator；ngAfterViewInit() {this.dataSource1.paginator = this.paginator;}@ViewChild('form') 表单；重启() {this.form.nativeElement.reset()} }const ELEMENT_DATA: 元素[] = [];/*更新账户属性组件从这里开始*/@成分({选择器:'app-updateAccountAttributes'，templateUrl: './updateAccountAttributes.html'})导出类 UpdateAccountAttributesComponent {构造函数( public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) 公共数据:任何，私人 accdetailservice: AccountdetailService ) { }过滤文本:字符串；调查员:字符串；位置:字符串；每次点击费用:字符串；acc_id:字符串；部门 ID:字符串；部门:字符串；acc_des: 字符串；deptdesc:字符串；/*从服务订阅数据*/ngOnInit(){this.accdetailservice.accountdetails().subscribe(data => this.investigator = data);this.accdetailservice.accountdetails().subscribe(data => this.CPC = data);this.accdetailservice.accountdetails().subscribe(data => this.location = data);this.accdetailservice.accountdetails().subscribe(data => this.department = data);} }
account.component.html
欢迎</mat-toolbar><br/><表格#form><表格><tr><td>帐户 ID<td><mat-form-field><input matInput (keyup)="applyFilter($event.target.value)" placeholder="账户ID" ></mat-form-field><br/></td>    <td>部门</td><td><mat-form-field ><mat-select style="min-width: 200px;"placeholder="要搜索的类型" [(value)]="部门"><input class="input1" matInput type="text" [(ngModel)]="filtertext" name="department" (change)="applyFilter($event.target.value)"><mat-option *ngFor="let dep of Department | filter : filtertext" [value]="dep.department" >{{ 部门}}</mat-option></mat-select></mat-form-field></td></tr></表单><br/><br/><button mat-raised-button color="primary" (click)="reset()">重置</button><!-- 表格从这里开始--><垫卡><div class="example-container mat-elevation-z8"><mat-table #table [dataSource]="dataSource1"><!-- 账号栏--><ng-container matColumnDef="acc_id"><mat-header-cell *matHeaderCellDef>帐户ID.</mat-header-cell><mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell></ng-容器><!-- 账户描述栏--><ng-container matColumnDef="acc_des"><mat-header-cell *matHeaderCellDef>账户描述 </mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.acc_des}}</a></mat-cell></ng-容器><!-- 调查员栏--><ng-container matColumnDef="调查员"><mat-header-cell *matHeaderCellDef>调查员</mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.investigator}}</a></mat-cell></ng-容器><!-- 帐户每次点击费用列 --><ng-container matColumnDef="CPC"><mat-header-cell *matHeaderCellDef>帐户每次点击费用 </mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.CPC}}</a></mat-cell></ng-容器><!-- 位置列--><ng-container matColumnDef="location"><mat-header-cell *matHeaderCellDef>位置</mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.location}}</a></mat-cell></ng-容器><!-- 客户部门 ID 列 --><ng-container matColumnDef="dept_id"><mat-header-cell *matHeaderCellDef>DeptID </mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.dept_id}}</a></mat-cell></ng-容器><!-- 部门描述栏--><ng-container matColumnDef="deptdesc"><mat-header-cell *matHeaderCellDef>部门描述</mat-header-cell><mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.deptdesc}}</a></mat-cell></ng-容器><mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row><mat-row *matRowDef="让行；列:displayColumns1;"(点击)="openDialog(row)"></mat-row></mat-table><mat-paginator #paginator[页面大小]="10"[pageSizeOptions]="[5, 10, 20]"></mat-paginator>
</mat-card>
updateAccountAttributes.html
<mat-toolbar color="primary" style="height:45px;"><span matTooltip="Back" style="margin-left:15px;"><button mat-mini-fab><i class="material-icons" (click)="dialogRef.close()">取消</i></button></span></mat-toolbar><!-- 标题为 PopUp --><垫卡><mat-card-title class="cardHeader">更新账户属性 </mat-card-title><mat-card-content><!-- 弹出窗口中的输入和下拉菜单 --><表格><tr><td class="inputs">帐户 ID </td><td><mat-input-container class="fullwidth" floatPlaceholder="never"><input matInput placeholder="" id="acc_id" name="acc_id" [value]="data.row.acc_id"></mat-input-container></td></tr><tr><td class="inputs">账户描述 </td><td><mat-input-container class="fullwidth" floatPlaceholder="never"><input matInput placeholder="" id="acc_des" name="acc_des" [value]="data.row.acc_des"></mat-input-container></td></tr><tr><td class="inputs">调查员</td><td><mat-form-field floatPlaceholder="never"><mat-select placeholder="" [(value)]="data.row.investigator"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="让调查员投资 | filter:filtertext " [value]="data.row.investigator">{{ inves.investigator}}</mat-option></mat-select></mat-form-field></td></tr><tr><td class="inputs">帐户每次点击费用 </td><td><mat-form-field floatPlaceholder="never"><mat-select placeholder="" [(value)]="data.row.CPC"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="let cpc of CPC | filter:filtertext " [value]="data.row.CPC">{{ cpc.CPC }}</mat-option></mat-select></mat-form-field></td></tr><tr><td class="inputs">位置 </td><td><mat-form-field floatPlaceholder="never"><mat-select placeholder="" [(value)]="data.row.location"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="let loc of location | filter:filtertext " [value]="data.row.location">{{ loc.location}}</mat-option></mat-select></mat-form-field></td></tr><tr><td class="inputs">部门 </td><td><mat-form-field floatPlaceholder="never" ><mat-select placeholder="" [(value)]="data.row.department"><input class="input1" matInput type="text" [(ngModel)]="filtertext"><mat-option *ngFor="let dep of Department | filter:filtertext " [value]="data.row.department" >{{ 部门}}</mat-option></mat-select></mat-form-field></td></tr><!-- 弹出窗口的按钮 --><div style="text-align:center; padding-top:20px;"><button mat-raised-button color="primary">保存</button>    <button mat-raised-button color="primary" (click)="dialogRef.close()">关闭</button>
</mat-card-content><!-- PopUp 的内部样式表 --><风格>.cardHeader{字体系列:Verdana，无衬线；字体大小:16px；字体粗细:粗体；颜色:#1a084c；文字对齐:居中；}.输入{字体系列:Verdana，无衬线；字体大小:11px；字体粗细:粗体；颜色:#0c0c28；左边距:50px；宽度:150px；}.input1{宽度:100%；高度:30px；边框:2px 纯灰色；背景色:#cbd1db;字体大小:12px；字体系列:Verdana，无衬线；}.mat-raised-button{边框半径:15px；}垫表单字段，垫输入容器{左边距:80px；宽度:250px；高度:35px；边距顶部:-10px;字体大小:12px；字体系列:Verdana，无衬线；}垫选择{边距顶部:-5px；宽度:250px；字体大小:12px；字体系列:Verdana，无衬线；}</风格></mat-card>
account.component.ts:
import {Component, ViewChild, Inject, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import {MatPaginator, MatTableDataSource} from '@angular/material';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { AccountdetailService } from '../accountdetail.service';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss']
})
export class AccountComponent implements OnInit {
filtertext:string;
departments: any;
acc_id: any;
accno: any;
constructor(public dialog: MatDialog , private accdetailservice: AccountdetailService ) { }
/* Pop up code starts here */
openDialog(row): void {
let dialogRef = this.dialog.open(UpdateAccountAttributesComponent, {
width: '600px', height: '850',
data: { row }
});
dialogRef.afterClosed().subscribe(result => {row = result;});
console.log('Row clicked: ', row);
}
/* Table Starts here
---------------------- */
displayedColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];
dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);
applyFilter(filterValue: any) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource1.filter = filterValue;
}
ngOnInit(){
this.accdetailservice.accountdetails()
.subscribe(data => {
this.departments = data;
// Add this row
this.dataSource1.data = data;
});
}
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource1.paginator = this.paginator;
}
@ViewChild('form') form;
reset() {
this.form.nativeElement.reset()
}
}
const ELEMENT_DATA: Element[] = [];
/*
Update Account Attributes component starts here
*/
@Component({
selector: 'app-updateAccountAttributes',
templateUrl: './updateAccountAttributes.html'
})
export class UpdateAccountAttributesComponent {
constructor( public dialogRef: MatDialogRef<UpdateAccountAttributesComponent>,
@Inject(MAT_DIALOG_DATA) public data: any ,
private accdetailservice: AccountdetailService ) { }
console.log(data);
selecteddept:string;
selectedloc:string;
selectedinvestigator:string;
selectedcpc:string;
filtertext:string;
departments: string;
investigator: string;
location: string;
CPC: string;
/*
Subscribing data from the service
*/
ngOnInit(){
this.accdetailservice.accountdetails()
.subscribe(data => this.investigator = data);
this.accdetailservice.accountdetails()
.subscribe(data => this.CPC = data);
this.accdetailservice.accountdetails()
.subscribe(data => this.location = data);
this.accdetailservice.accountdetails()
.subscribe(data => this.departments = data);
} }
account.component.html:
<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>
<form #form>
<table>
<tr><td> Account ID</td>
<td>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Account ID" >
</mat-form-field><br/>
</td>
    
<td>Department</td>
<td>
<mat-form-field >
<mat-select style="min-width: 200px;" placeholder="Type to search" [(value)]="department">
<input class="input1" matInput type="text" [(ngModel)]="filtertext" name="department" (change)="applyFilter($event.target.value)">
<mat-option *ngFor="let dep of departments | filter : filtertext" [value]="dep.department" >
{{ dep.department }}
</mat-option>
</mat-select>
</mat-form-field>
</td></tr>
</table>
</form>
<br/><br/>
<button mat-raised-button color="primary" (click)="reset()">Reset </button>
<!-- Table starts here -->
<mat-card>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource1">
<!-- Account No. Column -->
<ng-container matColumnDef="acc_id">
<mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
</ng-container>
<!-- Account Description Column -->
<ng-container matColumnDef="acc_des">
<mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.acc_des}}</a> </mat-cell>
</ng-container>
<!-- Investigator Column -->
<ng-container matColumnDef="investigator">
<mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.investigator}}</a> </mat-cell>
</ng-container>
<!-- Account CPC Column -->
<ng-container matColumnDef="CPC">
<mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.CPC}}</a></mat-cell>
</ng-container>
<!-- Location Column -->
<ng-container matColumnDef="location">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.location}}</a></mat-cell>
</ng-container>
<!-- Client Dept ID Column -->
<ng-container matColumnDef="dept_id">
<mat-header-cell *matHeaderCellDef> DeptID </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.dept_id}}</a></mat-cell>
</ng-container>
<!-- Dept Description Column -->
<ng-container matColumnDef="deptdesc">
<mat-header-cell *matHeaderCellDef> Dept Description </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.deptdesc}}</a></mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns1;" (click)="openDialog(row)"> </mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
</mat-card>
updateAccountAttributes.html:
<mat-toolbar color="primary" style="height:45px;">
<span matTooltip="Back" style="margin-left:15px;">
<button mat-mini-fab><i class="material-icons" (click)="dialogRef.close()">cancel</i></button></span>
</mat-toolbar>
<!-- Heading for the PopUp -->
<mat-card>
<mat-card-title class="cardHeader">Update Account Attributes</mat-card-title>
<mat-card-content>
<!-- Inputs and Drop-downs in the PopUp -->
<table>
<tr>
<td class="inputs"> Account ID </td>
<td>
<mat-input-container class="fullwidth" floatPlaceholder="never">
<input matInput placeholder=" " id="empname" name="empname">
</mat-input-container>
</td>
</tr>
<tr>
<td class="inputs">Account Description </td>
<td>
<mat-input-container class="fullwidth" floatPlaceholder="never">
<input matInput placeholder=" " id="empname" name="empname">
</mat-input-container>
</td>
</tr>
<tr>
<td class="inputs">Investigator </td>
<td>
<mat-form-field floatPlaceholder="never">
<mat-select placeholder=" " [(value)]="this.investigator">
<input class="input1" matInput type="text" [(ngModel)]="filtertext">
<mat-option *ngFor="let inves of investigator | filter:filtertext " [value]="inves.investigator">
{{ inves.investigator}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
<tr>
<td class="inputs">Account CPC </td>
<td>
<mat-form-field floatPlaceholder="never">
<mat-select placeholder=" " [(value)]="selectedcpc">
<input class="input1" matInput type="text" [(ngModel)]="filtertext">
<mat-option *ngFor="let cpc of CPC | filter:filtertext " [value]="cpc.CPC">
{{ cpc.CPC }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
<tr>
<td class="inputs">Location </td>
<td>
<mat-form-field floatPlaceholder="never">
<mat-select placeholder=" " [(value)]="selectedloc">
<input class="input1" matInput type="text" [(ngModel)]="filtertext">
<mat-option *ngFor="let loc of location | filter:filtertext " [value]="loc.location">
{{ loc.location}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
<tr>
<td class="inputs">Department </td>
<td>
<mat-form-field floatPlaceholder="never" >
<mat-select placeholder=" " [(value)]="selecteddept">
<input class="input1" matInput type="text" [(ngModel)]="filtertext">
<mat-option *ngFor="let dep of departments | filter:filtertext " [value]="dep.department" >
{{ dep.department }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
</table>
<!-- Buttons for the PopUp -->
<div style="text-align:center; padding-top:20px;">
<button mat-raised-button color="primary">Save</button>    
<button mat-raised-button color="primary" (click)="dialogRef.close()">Close</button>
</div>
</mat-card-content>
<!-- Internal Style Sheet for the PopUp -->
<style>
.cardHeader{
font-family:Verdana, sans-serif;
font-size:16px;
font-weight:bold;
color:#1a084c;
text-align:center;
}
.inputs{
font-family:Verdana,sans-serif;
font-size:11px;
font-weight:bold;
color:#0c0c28;
margin-left:50px;
width:150px;
}
.input1{
width:100%;
height:30px;
border:2px solid grey;
background-color:#cbd1db;
font-size:12px;
font-family: Verdana, sans-serif;
}
.mat-raised-button{
border-radius: 15px;
}
mat-form-field, mat-input-container{
margin-left:80px;
width:250px;
height:35px;
margin-top:-10px;
font-size:12px;
font-family: Verdana, sans-serif;
}
mat-select{
margin-top:-5px;
width:250px;
font-size:12px;
font-family: Verdana, sans-serif;
}
</style> </mat-card>
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { FilterPipe } from './filter.pipe';
import { FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';
import { AppMaterialModule } from './app-material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountComponent,UpdateAccountAttributesComponent } from './account/account.component';
import { AccountdetailService } from './accountdetail.service';
import './rxjs-operators';
@NgModule({
declarations: [
AppComponent,
AccountComponent ,UpdateAccountAttributesComponent,
FilterPipe
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AppMaterialModule,
FormsModule ,
HttpModule
],
entryComponents:[ UpdateAccountAttributesComponent],
providers: [ AccountdetailService],
bootstrap: [AppComponent]
})
export class AppModule { }
Here i have update the account.component.ts account.component.html and updateAccountAttributes.html files.
In the account.component.html file i have added a opendialog(row) method in the line below...
**<mat-row *matRowDef="let row; columns: displayedColumns1;" (click)="openDialog(row)"> </mat-row>**
I called this method in account.component.ts file and displayed the row data in console.
And opened this dialog with the updateAccountAttributes.html file...
I am able to fetch data in the dialog ... but how can i access the particular element data in my popup view ....
please help to resolve this...........
解决方案
I modified the files as shown below...
account.component.ts
import {Component, ViewChild, Inject, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup } from '@angular/forms';
import {MatPaginator, MatTableDataSource} from '@angular/material';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { AccountdetailService } from '../accountdetail.service';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss']
})
export class AccountComponent implements OnInit {
filtertext:string;
department: string;
constructor(public dialog: MatDialog , private accdetailservice: AccountdetailService ) { }
/* Pop up code starts here */
openDialog(row): void {
let dialogRef = this.dialog.open(UpdateAccountAttributesComponent, {
width: '600px', height: '850',
data: { row }
});
dialogRef.afterClosed().subscribe(result => {row = result;});
console.log('Row clicked: ', row);
}
/* Table Starts here
---------------------- */
displayedColumns1 = ['acc_id', 'acc_des', 'investigator', 'CPC','location','dept_id','deptdesc'];
dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);
applyFilter(filterValue: any) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource1.filter = filterValue;
}
ngOnInit(){
this.accdetailservice.accountdetails()
.subscribe(data => {
this.department = data;
// Add this row
this.dataSource1.data = data;
}); }
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource1.paginator = this.paginator;
}
@ViewChild('form') form;
reset() {
this.form.nativeElement.reset()
} }
const ELEMENT_DATA: Element[] = [];
/*
Update Account Attributes component starts here
*/
@Component({
selector: 'app-updateAccountAttributes',
templateUrl: './updateAccountAttributes.html'
})
export class UpdateAccountAttributesComponent {
constructor( public dialogRef: MatDialogRef<UpdateAccountAttributesComponent>,
@Inject(MAT_DIALOG_DATA) public data: any ,
private accdetailservice: AccountdetailService ) { }
filtertext:string;
investigator: string;
location: string;
CPC: string;
acc_id: string;
dept_id:string;
department: string;
acc_des: string;
deptdesc: string;
/*
Subscribing data from the service
*/
ngOnInit(){
this.accdetailservice.accountdetails()
.subscribe(data => this.investigator = data);
this.accdetailservice.accountdetails()
.subscribe(data => this.CPC = data);
this.accdetailservice.accountdetails()
.subscribe(data => this.location = data);
this.accdetailservice.accountdetails()
.subscribe(data => this.department = data);
} }
account.component.html
<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>
<form #form>
<table>
<tr><td> Account ID</td>
<td>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Account ID" >
</mat-form-field><br/>
</td>
    
<td>Department</td>
<td>
<mat-form-field >
<mat-select style="min-width: 200px;" placeholder="Type to search" [(value)]="department">
<input class="input1" matInput type="text" [(ngModel)]="filtertext" name="department" (change)="applyFilter($event.target.value)">
<mat-option *ngFor="let dep of departments | filter : filtertext" [value]="dep.department" >
{{ dep.department }}
</mat-option>
</mat-select>
</mat-form-field>
</td></tr>
</table>
</form>
<br/><br/>
<button mat-raised-button color="primary" (click)="reset()">Reset </button>
<!-- Table starts here -->
<mat-card>
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource1">
<!-- Account No. Column -->
<ng-container matColumnDef="acc_id">
<mat-header-cell *matHeaderCellDef> Account ID. </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.acc_id}}</mat-cell>
</ng-container>
<!-- Account Description Column -->
<ng-container matColumnDef="acc_des">
<mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.acc_des}}</a> </mat-cell>
</ng-container>
<!-- Investigator Column -->
<ng-container matColumnDef="investigator">
<mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.investigator}}</a> </mat-cell>
</ng-container>
<!-- Account CPC Column -->
<ng-container matColumnDef="CPC">
<mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.CPC}}</a></mat-cell>
</ng-container>
<!-- Location Column -->
<ng-container matColumnDef="location">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.location}}</a></mat-cell>
</ng-container>
<!-- Client Dept ID Column -->
<ng-container matColumnDef="dept_id">
<mat-header-cell *matHeaderCellDef> DeptID </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.dept_id}}</a></mat-cell>
</ng-container>
<!-- Dept Description Column -->
<ng-container matColumnDef="deptdesc">
<mat-header-cell *matHeaderCellDef> Dept Description </mat-header-cell>
<mat-cell *matCellDef="let element"><a (click)="openDialog(account)">{{element.deptdesc}}</a></mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns1;" (click)="openDialog(row)"> </mat-row>
</mat-table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</div>
</mat-card>
updateAccountAttributes.html
<!-- Pop Up Toolbar -->
<mat-toolbar color="primary" style="height:45px;">
<span matTooltip="Back" style="margin-left:15px;">
<button mat-mini-fab><i class="material-icons" (click)="dialogRef.close()">cancel</i></button></span>
</mat-toolbar>
<!-- Heading for the PopUp -->
<mat-card>
<mat-card-title class="cardHeader">Update Account Attributes </mat-card-title>
<mat-card-content>
<!-- Inputs and Drop-downs in the PopUp -->
<table>
<tr>
<td class="inputs"> Account ID </td>
<td>
<mat-input-container class="fullwidth" floatPlaceholder="never">
<input matInput placeholder=" " id="acc_id" name="acc_id" [value]="data.row.acc_id">
</mat-input-container>
</td>
</tr>
<tr>
<td class="inputs">Account Description </td>
<td>
<mat-input-container class="fullwidth" floatPlaceholder="never">
<input matInput placeholder=" " id="acc_des" name="acc_des" [value]="data.row.acc_des">
</mat-input-container>
</td>
</tr>
<tr>
<td class="inputs">Investigator </td>
<td>
<mat-form-field floatPlaceholder="never">
<mat-select placeholder=" " [(value)]="data.row.investigator">
<input class="input1" matInput type="text" [(ngModel)]="filtertext">
<mat-option *ngFor="let inves of investigator | filter:filtertext " [value]="data.row.investigator">
{{ inves.investigator}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
<tr>
<td class="inputs">Account CPC </td>
<td>
<mat-form-field floatPlaceholder="never">
<mat-select placeholder=" " [(value)]="data.row.CPC">
<input class="input1" matInput type="text" [(ngModel)]="filtertext">
<mat-option *ngFor="let cpc of CPC | filter:filtertext " [value]="data.row.CPC">
{{ cpc.CPC }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
<tr>
<td class="inputs">Location </td>
<td>
<mat-form-field floatPlaceholder="never">
<mat-select placeholder=" " [(value)]="data.row.location">
<input class="input1" matInput type="text" [(ngModel)]="filtertext">
<mat-option *ngFor="let loc of location | filter:filtertext " [value]="data.row.location">
{{ loc.location}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
<tr>
<td class="inputs">Department </td>
<td>
<mat-form-field floatPlaceholder="never" >
<mat-select placeholder=" " [(value)]="data.row.department">
<input class="input1" matInput type="text" [(ngModel)]="filtertext">
<mat-option *ngFor="let dep of department | filter:filtertext " [value]="data.row.department" >
{{ dep.department }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
</table>
<!-- Buttons for the PopUp -->
<div style="text-align:center; padding-top:20px;">
<button mat-raised-button color="primary">Save</button>    
<button mat-raised-button color="primary" (click)="dialogRef.close()">Close</button>
</div>
</mat-card-content>
<!-- Internal Style Sheet for the PopUp -->
<style>
.cardHeader{
font-family:Verdana, sans-serif;
font-size:16px;
font-weight:bold;
color:#1a084c;
text-align:center;
}
.inputs{
font-family:Verdana,sans-serif;
font-size:11px;
font-weight:bold;
color:#0c0c28;
margin-left:50px;
width:150px;
}
.input1{
width:100%;
height:30px;
border:2px solid grey;
background-color:#cbd1db;
font-size:12px;
font-family: Verdana, sans-serif;
}
.mat-raised-button{
border-radius: 15px;
}
mat-form-field, mat-input-container{
margin-left:80px;
width:250px;
height:35px;
margin-top:-10px;
font-size:12px;
font-family: Verdana, sans-serif;
}
mat-select{
margin-top:-5px;
width:250px;
font-size:12px;
font-family: Verdana, sans-serif;
}
</style> </mat-card>
这篇关于无法从弹出窗口中的表行绑定数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
