角材2データテーブルの設定マスター - 詳細ビューとして？

Question

MDデータテーブルには、マスター/ディテールセットアップが付属していません。この記事の時点では、AM2データテーブルはわずか3週間しか使用できませんでした。マスター - ディテール用にデータテーブルを設定する方法については、Web上でいくつか質問がありました。私はそれを理解するまでしばらく苦労した。

データテーブルのGitHubサイトなど、さまざまなサイトのポスターの中には、行をクリックしたい場合があります。下の行をスライドさせると、小さなデータが表示されます。データテーブルはこれをネイティブに実行せず、しばらくの間は行いません。

ただし、大量のデータを表示したり、編集したりする場合は、ボタンと別々のビューが適しています。では、これを実装する方法は？

Answer 1

このコンポーネントは、データベースのすべてのメンバー（この場合は、AngularFire 2を使用するFirebase）をサービスコンポーネントから取り込みます。最初に、以下のhtmlの最後の列で行ったようにデータベースキーをインポートする必要があります。それから私はディスプレイでそれを隠す：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() {} 
}