用另一個組件中的數據填充“角材料”對話框

Question

我有一個Angular Material應用程序作為類分配。 前提是提供服務列表的電腦維修店。 用戶檢查所需的服務，然后單擊“計算”按鈕，然后會彈出一張發票，其中包含用戶選擇的服務以及這些服務的總成本。 我在一個組件中設置了服務列表，當用戶單擊所需的對象時，將捕獲這些對象值。 我在另一個組件中有發票的物料對話框。 我還沒有編寫實際將服務價格加在一起的代碼。 我現在的目標是使發票列出所選服務。 當我單擊“計算”按鈕時，發票會彈出，但沒有列出任何服務，因此看來來自第一個組件的數據沒有到達第二個組件。 有人可以幫忙嗎？

這是代碼

修復程序

export interface Fix {
  id: number;
  name: string;
  price: string;
  checked: boolean;
}

fix.service.ts

import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';
import { Fix } from './fix';

@Injectable()
export class FixService {
  fixes: Fix[] = [
    {id: 1, name: "Password Reset", price: "39.99", checked: false},
    {id: 2, name: "Spyware Removal", price: "99.99", checked: false},
    {id: 3, name: "RAM Upgrade", price: "129.99", checked: false},
    {id: 4, name: "Software Installation", price: "49.99", checked: false},
    {id: 5, name: "Tune-up", price: "89.99", checked: false},
    {id: 6, name: "Keyboard Cleaning", price: "45.00", checked: false},
    {id: 7, name: "Disk Clean-up", price: "149.99", checked: false},
  ];

  constructor() { }

  getFix(): Observable<Fix[]> {
    return of(this.fixes);
  }
}

base-layout.component.html

<div class="wrapper">
  <mat-card class="services-panel frm-services-panel">
    <mat-card-header class="frm-services-header">
      <mat-toolbar class="frm-services-toolbar">
        Available Services
      </mat-toolbar>
    </mat-card-header>
    <mat-card-content class="frm-services-body">
      <mat-checkbox *ngFor="let fix of fixes" value="{{fix.name}} {{fix.price}}" [(ngModel)]="fix.checked" (change)="getCheckboxes()">
        <div fxLayout="row">
          <div class="frm-services-name">
            {{ fix.name }}
          </div>
          <div class="rightSide">
            {{ fix.price }}
          </div>
        </div>
      </mat-checkbox>
    </mat-card-content>
    <mat-card-content class="frm-services-inputs">
      <mat-form-field>
        <input matInput placeholder="Cost of Parts">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Cost of Labor @$50.00/hr">
      </mat-form-field>
      {{ selectedFixes | json }}
    </mat-card-content>
    <mat-card-actions class="frm-login-actions">
      <button mat-raised-button class="btn-login button1" (click)="getInvoice()">Calculate</button>
    </mat-card-actions>
  </mat-card>
</div>

base-layout.component.ts

import { InvoiceSummaryDialogComponent } from './../../pages/invoice-summary-dialog/invoice-summary-dialog.component';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { tap, filter, map } from 'rxjs/operators';
import { Fix } from '../fix';
import { FixService } from '../fix.service';
import { Observable, Subscription } from 'rxjs';
import { MatDialog, MatDialogConfig } from '@angular/material';

@Component({
  selector: 'app-base-layout',
  templateUrl: './base-layout.component.html',
  styleUrls: ['./base-layout.component.scss']
})
export class BaseLayoutComponent implements OnInit, OnDestroy {
  fixes: Fix[];
  subs: Subscription[] = []
  selectedFixes: Fix[] = [];
  constructor(private fixService: FixService, private dialog: MatDialog) { }

  ngOnInit() {
    const sub = this.fixService.getFix()
      .subscribe(fixes => {
        this.fixes = fixes;
      });
      this.subs.push(sub);
  }

  getCheckboxes() {
    this.selectedFixes = this.fixes
      .filter(f => f.checked);
        // return this.selectedFixes;
  }

  getInvoice() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.data = {
      selectedFixes: this.selectedFixes
    }
    const dialogRef = this.dialog.open(InvoiceSummaryDialogComponent, dialogConfig);
    dialogRef.afterClosed().subscribe(
      data => console.log("Dialog output:", data)
    )
  }

  ngOnDestroy() {
    for (const sub of this.subs) {
      if(sub) {
        try {
          sub.unsubscribe();
        } catch {}
      }
    }
  }
}

invoice-summary-dialog.component.html

<!-- <div class="container"> -->
<h2 mat-dialog-title>Invoice</h2>
<mat-dialog-content>
  <ul>
    <li *ngFor="let selectedFix of selectedFixes">
      <div fxLayout="row">
        <div class="frm-invoice-name">
          {{ selectedFix.name }}
        </div>
        <div class="rightSide">
          {{ selectedFix.price }}
        </div>
      </div>
    </li>
  </ul>
  Total:
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-raised-button class="confirm" (click)="confirm()">Confirm</button>
</mat-dialog-actions>
<!-- </div> -->

invoice-summary-dialog.component.ts

@Component({
  selector: 'app-invoice-summary-dialog',
  templateUrl: './invoice-summary-dialog.component.html',
  styleUrls: ['./invoice-summary-dialog.component.scss']
})
export class InvoiceSummaryDialogComponent implements OnInit {
  @Input() selectedFixes;
  constructor(private dialogRef: MatDialogRef<BaseLayoutComponent>,
          @Inject(MAT_DIALOG_DATA) data) { }

  ngOnInit() {
  }

  confirm() {
    this.dialogRef.close();
    location.reload();
  }
}

Answer 1

數據在這里@Inject(MAT_DIALOG_DATA) data 。 所以你可以像這樣檢索它

ngOnInit() {
  this.selectedFixes = this.data.selectedFixes;
}

在InvoiceSummaryDialogComponent的ngOnInit掛鈎中。

Answer 2

在對話框組件中，未使用從基本組件接收的數據，因此您將無法顯示所選服務。

在invoice-summary-dialog.component.html中

更換

 <li *ngFor="let selectedFix of selectedFixes">
      <div fxLayout="row">
        <div class="frm-invoice-name">
          {{ selectedFix.name }}
        </div>
        <div class="rightSide">
          {{ selectedFix.price }}
        </div>
      </div>
    </li>

與

<ng-container *ngIf="data?.selectedFixes">
    <li *ngFor="let selectedFix of data.selectedFixes">
          <div fxLayout="row">
            <div class="frm-invoice-name">
              {{ selectedFix.name }}
            </div>
            <div class="rightSide">
              {{ selectedFix.price }}
            </div>
          </div>
        </li>
</ng-container>

Answer 3

您可以通過以下方式傳遞數據：

    getInvoice() {
    const dialogRef = this.dialog.open(InvoiceSummaryDialogComponent, 
    this.selectedFixes);
    dialogRef.afterClosed().subscribe(
      data => console.log("Dialog output:", data)
    )
  }

並獲取數據（invoice-summary-dialog.component.ts）：-

    @Component({
  selector: 'app-invoice-summary-dialog',
  templateUrl: './invoice-summary-dialog.component.html',
  styleUrls: ['./invoice-summary-dialog.component.scss']
})
export class InvoiceSummaryDialogComponent implements OnInit {
  @Input() selectedFixes;
  constructor(private dialogRef: MatDialogRef<BaseLayoutComponent>,
          @Inject(MAT_DIALOG_DATA) data) { }

  ngOnInit() {
   console.log(this.data) // Your data
  }

  confirm() {
    this.dialogRef.close(this.data);//You can return data
    location.reload();
  }
}