角度材质如何单击表格中的一行并让它将一个特定单元格的内容返回到变量中？

Question

	export interface Statususers 
	{
	    sysid:          Number                  ;
	    LASTNAME:       String                  ;
	    FIRSTNAME:      String                  ;
	    FIRST_AND_LAST: String                  ;
	    REGISTRATION:   String                  ;
	    CHEATER_ID:     String                  ;
	    UNIQUE_NUMBER:  Number                  ;
	    TYPE:           String                  ;
	    PASSWORD:       String                  ;
	    USERNUMBER:     Number                  ;
	}

	import { Component }              from '@angular/core';
	import { Input }                  from '@angular/core';
	import { OnInit }                 from '@angular/core';
	import { ViewChild }              from '@angular/core';
	import { AfterViewInit }          from '@angular/core';
	import { Observable }             from 'rxjs/Observable';
	import { DataSource }             from '@angular/cdk/collections' ;
	import { MatPaginator }           from '@angular/material';
	import { MatTableDataSource}      from '@angular/material';
	import { PageEvent }              from '@angular/material';
	import { MatSort }                from '@angular/material';
	import { HttpClientModule }       from '@angular/common/http';
	import { HttpClient }             from '@angular/common/http';
	import { Statususers }            from '../../models/statususers.model';

	@Component({
	  selector: 'app-statususers',
	  templateUrl: './statususers.component.html',
	  styleUrls: ['./statususers.component.css'], 
	})
	export class StatususersComponent implements OnInit, AfterViewInit 
	{
	  displayedColumns  = [ 'registration', 'type'] ;
	  dataSource        = new MatTableDataSource <Statususers>() ;  
	  aircraftreg: string = 'None' ;

	  @ViewChild(MatSort) sort: MatSort ;
	  @ViewChild(MatPaginator) paginator: MatPaginator;

	  constructor( private http: HttpClient  ) { }

	  ngOnInit()                    // 'https://jsonplaceholder.typicode.com/users' 
	   { 
	     this.http.get<Statususers[] > ('http://huckleberrypp.com/angular/php/status_users.php').subscribe (statususers => { this.dataSource.data = statususers ;  } ) ;
	   }  

	  ngAfterViewInit()  
	  {
	    this.dataSource.sort      = this.sort ;
	    this.dataSource.paginator = this.paginator ;
	  }

	  doFilter (filterValue: string ) 
	  { this.dataSource.filter = filterValue.trim().toLowerCase() ; }

	selectRow(row) 
	 {
	 // alert(row['registration']);
	  console.log(row['registration']);
	 //  this.aircraftreg = 'C-GHHZ'   ;
	   this.aircraftreg = (row['registration']);

	 }

	}

	<div class="myAircraftBrowse">  
	  <div class="example-header">
	    <mat-form-field>
	      <input matInput type= "text" (keyup)="doFilter($event.target.value)" placeholder="Enter aircraft filter here">
	    </mat-form-field>
	  </div>

	  <h1 class="centerText"> {{aircraftreg}} </h1>

	  <div class="example-container mat-elevation-z8">
	    <mat-table #table [dataSource]="dataSource" matSort>
	      <!--- Note that these columns can be defined in any order.  The actual rendered columns are set as a property on the row definition" -->

	      <!-- Registration Column -->
	      <ng-container matColumnDef="first_and_last" >
		<mat-header-cell *matHeaderCellDef mat-sort-header> First and Last </mat-header-cell>
		<mat-cell *matCellDef="let statususers"  > {{statususers.FIRST_AND_LAST}} </mat-cell>
	      </ng-container>

	      <!-- Type Column -->
	      <ng-container matColumnDef="registration" >
		  <mat-header-cell *matHeaderCellDef mat-sort-header > Registration </mat-header-cell>
		<mat-cell  #aircrftRegistration *matCellDef="let statususers" > {{statususers.REGISTRATION}}</mat-cell> 
	      </ng-container>

	      <!-- Hours Column -->
	      <ng-container matColumnDef="type" >
		<mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
		<mat-cell #aircrftType *matCellDef="let statususers"  > {{statususers.TYPE}} </mat-cell>
	      </ng-container>

	      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
	      <mat-row (click)="selectRow(row)" *matRowDef="let row; columns: displayedColumns;"  ></mat-row>

	    </mat-table>
		      <!--   [showFirstLastButtons]="true">   this was removed from list below -->
	    <mat-paginator #paginator    
		[pageSize]="8"
		[pageSizeOptions]="[5, 10, 20]">
	    </mat-paginator>

	  </div>
	</div>  

我在Angular Material中有一个表格，我想点击一行，让它将我选择的单元格元素返回给变量，以便我可以在其他地方使用它。下面的代码将显示控制台上所有列名和所单击行的内容，但我想只选择Type Script中的一列并将其保存到变量中。

selectRow(row) 
  {
    console.log(row) ;
    this.aircraftreg = 'A row was clicked'   ;  
    // alert ('Aircraft selected') ;
  }

谢谢您的帮助。

Answer 1

您可以简单地从所选行中获取列内容，如行['列名称']

例如，我显示的列是

displayedColumns = ['id', 'name', 'progress', 'color'];

我可以从所选行访问列名的值。

selectRow(row) {
  alert(row['name']);
 }

以下是从数据表行获取事件的HTML：

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

编辑：另一个问题是，您的displayedColumns是小写，而Statususers数据是大写的。

在访问时使用行['REGISTRATION']