角度材质如何单击表格中的某一行并将其返回到变量中？

Question

＆＃13;

＆＃13;

	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                  ;
	}

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

	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']);

	 }

	}

＆＃13;

	<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>  

＆＃13;

＆＃13;

＆＃13;

我在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']

时