クリックしたマテリアルカードのデータをAngular2/4のダイアログに入れる方法は？

Question

私は* ngForループを持っていて、画面上にすべてのマテリアルカード（古いバージョンを使用している場合はMatCardまたはmdCard）を表示します。そしてMatCardをクリックすると、ダイアログが開きます。ダイアログにMaterial Cardのデータを挿入したいと思います。

これは、これは私のBuyComponent.ts

@Component({ 
selector: 'app-buy',templateUrl: './buy.component.html', 
styleUrls: ['./buy.component.css'] 
}) 
export class BuyComponent implements OnInit { 

    constructor(private sellItemService: SellItemService, 

       private dialog:MatDialog) { 
    } 

    areThereItems: boolean = false; 
    allItems: DialogItem[] = []; 



    ngOnInit() { 
    this.showAllItemDialogs(); 
    } 

    OnMatCardClickEvent(){ 
    let dialogRef = this.dialog.open(ItemDialogComponent, { 
     height: '400px', 
     width: '600px' 
    }); 
    } 

これは私のItemDialog.html

<div class="col-md-12"> 
    <br> 
    <div> 
    <table> 
     <tr> 
     <td> 
      <label>{{itemName}}</label> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <label >{{itemImageUrl}}</label> 
     </td> 
     </tr> 

    </table> 
    <button type="submit" (click)="viewDetails()">View Details</button> 
    <br> 
    <label></label> 
    </div> 
</div> 

ItemDialog.component.ts

である私のbuyComponent.html

<div *ngIf="allItems" class="layout-row" > 
<mat-card *ngFor="let item of allItems" class="flex-lg-20" (click)="OnMatCardClickEvent($event)"> 

    <mat-card-header class="flex-lg-20"> 
    <h2>{{item.itemName}}</h2> 
    <br> 
    </mat-card-header> 
    <mat-card-content class="flex-lg-20"> 
    <h2> </h2> 
    <br>{{item.itemImageUrl}} 
    </mat-card-content> 

    <mat-card-content align="bottom" class="flex-lg-20"> 
    <div>Rs. {{item.itemPrice}}</div> 

    </mat-card-content> 
</mat-card><br><br><br> 

です

export class ItemDialogComponent implements OnInit { 
    @Input() item:any; 

    constructor(sellItemService: SellItemService,@Inject(MAT_DIALOG_DATA) public data: any) { 
    } 
    ngOnInit() { 
    } 
} 

Material Cardをクリックすると開くダイアログで、itemNameと他のItem Dataを使用します。

Answer 1

このコードを試してください。

htmlの代わりに - $eventを渡すのでは、アイテムのオブジェクトを渡す

<div *ngIf="allItems" class="layout-row" > 
<mat-card *ngFor="let item of allItems" class="flex-lg-20" (click)="OnMatCardClickEvent(item)"> 

    <mat-card-header class="flex-lg-20"> 
    <h2>{{item.itemName}}</h2> 
    <br> 
    </mat-card-header> 
    <mat-card-content class="flex-lg-20"> 
    <h2> </h2> 
    <br>{{item.itemImageUrl}} 
    </mat-card-content> 

    <mat-card-content align="bottom" class="flex-lg-20"> 
    <div>Rs. {{item.itemPrice}}</div> 

    </mat-card-content> 
</mat-card><br><br><br> 

BuyComponent.ts

@Component({ 
selector: 'app-buy',templateUrl: './buy.component.html', 
styleUrls: ['./buy.component.css'] 
}) 
export class BuyComponent implements OnInit { 

    constructor(private sellItemService: SellItemService, 

       private dialog:MatDialog) { 
    } 

    areThereItems: boolean = false; 
    allItems: DialogItem[] = []; 



    ngOnInit() { 
    this.showAllItemDialogs(); 
    } 
//function with param item object 
    OnMatCardClickEvent(item:any){ 
    let dialogRef = this.dialog.open(ItemDialogComponent, { 
     height: '400px', 
     width: '600px' 
    }); 

    dialogRef.componentInstance.itemName = item.itemName; 
dialogRef.componentInstance.itemImageUrl = item.itemImageUrl; 
    } 

ItemDialog.component.ts

 export class ItemDialogComponent implements OnInit { 
     @Input() item:any; 

    public itemName: string; 
public itemImageUrl: string; 

     constructor(sellItemService: SellItemService,@Inject(MAT_DIALOG_DATA) public data: any) { 
     } 
     ngOnInit() { 
     } 
    } 

それは作品