Question

我有一个* ngFor循环，在屏幕上显示所有材料卡（如果您使用旧版本，则显示MatCard或mdCard）。当我点击任何MatCard时，会打开一个对话框。我想将材料卡的数据插入对话框。

这是我的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>

这是我的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

 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 - 传递项目

的对象，而不是传递

WHERE MyDB.dispo_jahr & "-" & MyDB.dispo_kw Between [BeginDate] And [EndDate]

$event

BuyComponent.ts

<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>

ItemDialog.component.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;
  }

如何将点击的材料卡的数据导入Angular2 / 4中的对话框？

1 个答案: