Angle 2アプリケーションでmdカード内の拡張パネルコンポーネントを使用するにはどうすればよいですか？

Question

私は角度2のアプリケーションを使用しています。ここでは、md-cardを使用してタイルを表示しています.MDカード内に拡張パネルを追加します。パネルをクリックすると、コンテンツが展開されて表示されます。そのようなコンポーネントをMDカードに追加することは可能ですか？それともそれを設計する良い方法がありますか？いくつかの拡張可能なタイル/カードを表示するように？これらのリンクをオンラインで確認したところ、展開できるリストが表示されます。私はこの内部カードを使用できるかどうかはわかりません。 https://github.com/Gbuomprisco/ng2-expansion-panels https://material.io/guidelines/components/expansion-panels.html#expansion-panels-behavior

これらは "@角度/コア" を使用バージョンである： "2.4.10" "角度/材料@"： "2.0.0-beta.2"

以下

サンプルmdカードの使用方法です

<div fxLayout="row" fxLayoutWrap style="padding-bottom: 15px; 
padding-top: 15px; margin:auto; justify-content: center;background-color:paleturquoise;" > 
    <md-card fxFlex.gt-md="30" fxFlex.md="30" fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myData" style="margin:10px;"> 
    <md-card-content > 
    <h1>Name: {{data.name}} </h1> 
    <h3 [ngStyle]="{'margin-top': '-3px','margin-bottom': '20px'}">{{data.time | date:'HH:mm:ss, MMMM dd'}}</h3> 
    <h2>content1: {{data.somedata1 }}</h2> 
    <h2>content2: {{data.somedata2}}</h2> 
    <h2>content3: {{data.somedata2}}</h2> 
    <h2>content4: {{data.somedata3}}</h2> 
    <h3> 
    <a routerLink="">some link here</a> 
    </h3> 
    // Add expansion panel or collapsable UI component here 
    </md-card-content> 
    </md-card> 
</div> 

Answer 1

Angular 2アプリケーションでng2拡張パネルを使用する方法が見つかりました。 https://github.com/Gbuomprisco/ng2-expansion-panels

サンプルコード

<div fxLayout="row" fxLayoutWrap style="padding-bottom: 15px; 
    padding-top: 15px; margin:auto; justify-content: center;background-color:paleturquoise;" > 
    <md-card fxFlex.gt-md="30" fxFlex.md="30" fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myData" style="margin:10px;" 
[ngStyle]="{'backgroundColor': data.time > timeLimit1 ? '#69F0AE':(data.time < timeLimit2 ? '#FF5252':'yellow')}"> 
     <md-card-content > 
     <h1>Name: {{data.name}} </h1> 
     <h3 [ngStyle]="{'margin-top': '-3px','margin-bottom': '20px'}">{{data.time | date:'HH:mm:ss, MMMM dd'}}</h3> 
     <h3> 
     <a routerLink="">some link here</a> 
     </h3> 
      <expansion-panels-container> 
       <expansion-panel > 
       <expansion-panel-title> 
       Title1 
       </expansion-panel-title> 
       <expansion-panel-content> 
       <h2>content1: {{data.somedata1 }}</h2> 
       <h2>content2: {{data.somedata2}}</h2> 
       <h2>content3: {{data.somedata2}}</h2> 
       <h2>content4: {{data.somedata3}}</h2> 
       </expansion-panel-content> 
       </expansion-panel> 
       <expansion-panel> 
       <expansion-panel-title> 
       Title2 
       </expansion-panel-title> 
       <expansion-panel-content> 
       <h2>content2: {{data.somedata2}}</h2> 
       <h2>content3: {{data.somedata2}}</h2> 
       <h2>content4: {{data.somedata3}}</h2> 
       </expansion-panel-content> 
       </expansion-panel> 
      </expansion-panels-container> 
     </md-card-content> 
    </md-card> 
    </div>