无法绑定弹出窗口中的表行中的数据

时间：2018-02-20 08:43:14

标签： angular angular-material

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>

&emsp;&emsp;&emsp;&emsp;
<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>&emsp;&emsp;&emsp;&emsp;
       <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 { }

此处我更新了 account.component.ts account.component.html 和 updateAccountAttributes.html 文件。

在 account.component.html 文件中，我在下面的行中添加了 opendialog（行）方法... 

**<mat-row *matRowDef="let row; columns: displayedColumns1;" (click)="openDialog(row)"> </mat-row>**

我在 account.component.ts 文件中调用了此方法，并在控制台中显示了行数据。

使用 updateAccountAttributes.html 文件打开此对话框...

我能够在对话框中获取数据......但是如何在弹出视图中访问特定元素数据....

请帮忙解决这个问题............

1 个答案:

答案 0 :(得分：2)

我修改了文件，如下所示......

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>

&emsp;&emsp;&emsp;&emsp;
<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>&emsp;&emsp;&emsp;&emsp;
       <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>
相关问题
最新问题