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

Question

MD数据表没有附带主 - 细节设置。在这篇文章发布时，AM2数据表仅出现了3周。 Web上有几个关于如何为主 - 细节用途设置数据表的问题。我努力了一会儿，直到我明白了。

不同网站上的一些海报，如Data Table的GitHub网站希望能够点击一行，并且下面的行可以向下滑动以显示一些数据。数据表本身并不会这样做，也不会持续一段时间。

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

Answer 1

该组件从服务组件中引入数据库的所有成员，在这种情况下使用AngularFire 2的Firebase。首先，您必须像在下面的html中的最后一列中那样引入数据库密钥。然后我用显示器隐藏它：没有CSS。最后是将行。$ key属性放入单击参数中，以将密钥字符串传递到您的代码中。简单。对于新手来说，我已经包含了我的其他代码，所以你不必花费数小时来弄清楚发生了什么。这一切正常！去建立很酷的东西！

全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() {} 
}