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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了角度材质如何单击表格中的一行并让它将一个特定单元格的内容返回到变量中?相关的知识,希望对你有一定的参考价值。

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

谢谢您的帮助。 enter image description here

答案

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

例如,我显示的列是

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

以上是关于角度材质如何单击表格中的一行并让它将一个特定单元格的内容返回到变量中?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - 获取与单击的元素在同一行中的表格单元格的文本值

如何通过ag-grid中的角度材质菜单获取行数据

CSS:如何定位表格中的特定单元格?

如何显示特定表格单元格对象的详细信息?

表格视图单元格中的集合视图

如何使用角度将单元格 colspan 基于条件值?