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

Question

MD数据表没有主 - 详细设置。在这篇文章发表时，AM2数据表已经出来仅3周了。 Web上有一些关于如何为主 - 详细信息使用设置数据表的问题。我挣扎了一段时间，直到我弄清楚了。

各种网站上的一些海报，例如Data Table的GitHub网站，希望能够点击一行，下面的行向下滑动以显示一些数据。数据表本身并没有这样做，并且暂时没有。

但是，对于查看大量数据或编辑，按钮和单独的视图是好的。那么如何实现呢？

Answer 1

此组件从服务组件中引入数据库的所有成员，在本例中为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() {}
}