角度材料 – 角度材料2数据表设置为主 – 细节视图？

此组件从服务组件中引入数据库的所有成员,在本例中为Firebase使用AngularFire 2.首先,您必须引入数据库密钥,就像我在下面的html的最后一列中所做的那样.然后我用display：none css隐藏它.最后是将行.$key属性放入click param以将密钥字符串传递给代码.简单.对于新手,我已经包含了我的其余代码,因此您不必花费数小时来弄清楚发生了什么.一切正常！去建立很酷的东西！

全members.component.ts

<md-table #table [dataSource]="dataSource">

  <!-- First Name Column -->
  <ng-container cdkColumnDef="firstName">
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.firstName}} </md-cell>
  </ng-container>

  <!-- Las Name Column -->
  <ng-container cdkColumnDef="lastName">
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
    <md-cell *cdkCellDef="let row">  {{row.lastName}} </md-cell>
  </ng-container>

  <!-- Title Column -->
  <ng-container cdkColumnDef="mainSkillTitle">
    <md-header-cell *cdkHeaderCellDef> Title </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.mainSkillTitle}} </md-cell>
  </ng-container>

  <!-- Main Skills Column -->
  <ng-container cdkColumnDef="mainSkills">
    <md-header-cell *cdkHeaderCellDef> Main Skills </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{row.mainSkills}} </md-cell>
  </ng-container>

  <!-- Delete Buttons Column -->
  <ng-container cdkColumnDef="delete">
    <md-header-cell *cdkHeaderCellDef> Delete </md-header-cell>
    <md-cell *cdkCellDef="let row">
      <button (click)="deleteMember(row.$key)">Delete</button> </md-cell>
  </ng-container>

  <!-- Edit button Column -->
  <ng-container cdkColumnDef="edit">
    <md-header-cell *cdkHeaderCellDef> Edit </md-header-cell>
    <md-cell *cdkCellDef="let row">
      <button (click)="goToDetailPage(row.$key)">Edit</button> </md-cell>
  </ng-container>

  <!-- Database key Column -->

  <ng-container cdkColumnDef="key">
    <md-header-cell *cdkHeaderCellDef class="hiddenField"> Key </md-header-cell>
    <md-cell *cdkCellDef="let row" class="hiddenField"> {{row.$key}} </md-cell>
  </ng-container>


  <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
  <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>

</md-table>

全members.component.ts

import { Component,OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { MembersAdminService } from './member-admin.service';
import { MembersAdminSource } from './member-admin.service';
import { ConfirmService } from '../../../shared/confirm.service';
import { Member } from './member-admin.model';

@Component({
  selector: 'app-all-members',templateUrl: './all-members.component.html'
})
export class AllMembersComponent implements OnInit {

  members: Member[];
  private selectedId: number;
  private result: boolean;
  allMembers: Member[];


  // For MD data table.

  private dataSource: MembersAdminSource | null;
  private displayedColumns = [
      'firstName','lastName','mainSkillTitle','mainSkills','delete','edit','key'
  ];


  constructor(
      private membersAdminService: MembersAdminService,private router: Router,private confirmService: ConfirmService
  ) {}

  ngOnInit() {

    this.membersAdminService.getMembers()
        .subscribe(members => {
            this.members = members;
            this.dataSource = new MembersAdminSource(members);
        });
  }

  goToDetailPage(selectedMemberKey) {
    console.log('selectedMember: ',selectedMemberKey);
    this.router.navigate(['/loggedin/admin/membersAdmin/editMember',selectedMemberKey]);
  };

  deleteMember(selectedMemberKey) {
    // Call the confirm dialog component
    this.confirmService
        .confirm('Confirm Delete','This action is final. Gone forever!')
        // .do();
        .do(res => {if (res === true) {
            this.membersAdminService.deleteMember(selectedMemberKey);
        }})
        .subscribe(res => this.result = res,err => err);
  }

成员admin.service.ts

import { AngularFireDatabase,FirebaseListObservable } from 'angularfire2/database';
import { FirebaseApp } from 'angularfire2';
import { Inject,Injectable } from '@angular/core';

import { Member } from './member-admin.model';
import { SuccessService } from '../../../shared/success.service';

import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';


@Injectable()
export class MembersAdminService {

  private members$: FirebaseListObservable<Member[]>;

  constructor(
      private af: AngularFireDatabase,private successService: SuccessService,@Inject(FirebaseApp) fb) {
        this.members$= af.list('Members');
  }


  // Get all members.

  public getMembers(): FirebaseListObservable<any> {
    return this.af.list('Members',{
      query: {
        orderByChild: 'lastName'
      }
    });
  }


  // Fetch member detail for member list.

  public getMemberById(memberId: string) {
    return this.af.object('Members/' + memberId);
  }

  // Create new member

  public addMember(newMember: Member): void {
    this.members$.push(newMember)
        .catch(error => this.handleError(error));
  }

  // Update an existing member

  public updateMember(key: string,value: any): void {
    this.members$.update(key,value)
        .catch(error => this.handleError(error));
  }

  // Deletes a single member and calls for success modal window.

  public deleteMember(key: string): void {
    this.af.object('/Members/' + key).remove()
        .catch(error => this.handleError(error))
        .then(_ => this.success());
  }

  private success() {
    this.successService
        .openDialog('Database updated as you wished!');
  }

  // Default error handling for all actions

  private handleError(error) {
    console.log(error);
  }

}

// *** MD Data Table service. ***


export class MembersAdminSource extends DataSource<Member> {

    constructor(private members: Member[]) {
        super();
    }


    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable<Member[]> {
        return Observable.of(this.members);
    }

    disconnect() {}
}