Question

我有一个Angular Material应用程序作为类分配。前提是提供服务列表的电脑维修店。用户检查所需的服务，然后单击“计算”按钮，然后会弹出一张发票，其中包含用户选择的服务以及这些服务的总成本。我在一个组件中设置了服务列表，当用户单击所需的对象时，将捕获这些对象值。我在另一个组件中有发票的物料对话框。我还没有编写实际将服务价格加在一起的代码。我现在的目标是使发票列出所选服务。当我单击“计算”按钮时，发票会弹出，但没有列出任何服务，因此看来来自第一个组件的数据没有到达第二个组件。有人可以帮忙吗？

这是代码

fix.ts

val cameraIntent = Intent(MediaStore.ACTION_IMAGE_CAPTURE)
when {
     Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1 && Build.VERSION.SDK_INT < Build.VERSION_CODES.O -> {
         cameraIntent.putExtra("android.intent.extras.CAMERA_FACING", CameraCharacteristics.LENS_FACING_FRONT)  // Tested on API 24 Android version 7.0(Samsung S6)
     }
     Build.VERSION.SDK_INT >= Build.VERSION_CODES.O -> {
         cameraIntent.putExtra("android.intent.extras.CAMERA_FACING", CameraCharacteristics.LENS_FACING_FRONT) // Tested on API 27 Android version 8.0(Nexus 6P)
         cameraIntent.putExtra("android.intent.extra.USE_FRONT_CAMERA", true)
     }
     else -> cameraIntent.putExtra("android.intent.extras.CAMERA_FACING", 1)  // Tested API 21 Android version 5.0.1(Samsung S4)
}
startActivityForResult(cameraIntent, REQUEST_CODE_CAMERA)

fix.service.ts

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

base-layout.component.html

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

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

invoice-summary-dialog.component.html

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

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

Answer 1

数据到这里public class Student { public Student() { this.Courses = new HashSet<Course>(); } public int StudentId { get; set; } [Required] public string StudentName { get; set; } public virtual ICollection<Course> Courses { get; set; } } public class Course { public Course() { this.Students = new HashSet<Student>(); } public int CourseId { get; set; } public string CourseName { get; set; } public virtual ICollection<Student> Students { get; set; } }。因此您可以通过

之类的方式进行检索

import pyperclip

text = pyperclip.paste()
lines = text.split()
pyperclip.copy(', '.join(lines))

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();
  }
}

用另一个组件中的数据填充“角材料”对话框

3 个答案: