今天，我遇到了将object（customer）id传递给角度模态的问题。一开始，我是将客户ID传递给另一个组件，例如：
<a [routerLink]="['/customers/single', this.customer.id]"></a>
然后，我将重定向到包含客户详细信息的另一个组件。我要存档的所有内容都将id传递给模式组件，并在此特定模式下打印客户详细信息，而无需重定向到另一个组件。
客户详细信息：
export interface CustomerDetails {
id?: number;
name: string;
surname: string,
email: string;
phoneNumber: string;
status: string;
username: string;
}
customer-single.component.ts
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {CustomerService} from "../shared/customer.service";
import {Observable} from "rxjs";
import {CustomerDetails} from "../model/customer-details";
@Component({
selector: 'app-customer-single',
templateUrl: './customer-single.component.html',
styleUrls: ['./customer-single.component.css']
})
export class CustomerSingleComponent implements OnInit {
customer$: Observable<CustomerDetails>;
customerDetails$: Observable<CustomerDetails>;
customer: CustomerDetails;
constructor(private customerService: CustomerService,
private activatedRoute: ActivatedRoute,
private router: Router) {
}
ngOnInit() {
const id = this.activatedRoute.snapshot.params['id'];
this.customer$ = this.customerService.getOne(id);
}
onPreDetailsCustomer() {
const id = this.activatedRoute.snapshot.params['id'];
this.customerDetails$ = this.customerService.getOne(id);
}
}
customer-list.component.html
<div>
<table class="table" style="width: 90%">
<thead class="table">
<tr>
<th scope="col">No.</th>
<th scope="col" width="10%">Name</th>
<th scope="col" width="10%">Surname</th>
<th scope="col" width="10%">Phone number</th>
<th scope="col" width="10%">Email</th>
<th scope="col" width="10%">NIP</th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of ( customers$ | async ); let i = index">
<td scope="row">{{i + 1}}</td>
<td>{{customer.name}}</td>
<td>{{customer.surname}}</td>
<td>{{customer.phoneNumber}}</td>
<td>{{customer.email}}</td>
<td>{{customer.nip}}</td>
<td>
<a [routerLink]="['/customers/modify', customer.id]">
<button mat-raised-button color="primary">Modify</button>
</a>
<button mat-raised-button color="accent" (click)="openDialog(customer.id)">Details</button>
<a (click)="onRemove(customer.id)">
<button mat-raised-button color="warn">Remove</button>
</a>
<button type="button" class="btn btn-dark" routerLink="products">
<span class="btn-label"><i class="fas fa-cart-plus"></i></span>Compose basket
</button>
</td>
</tr>
</tbody>
</table>
</div>
customer-list.component.ts
import {Component, OnInit} from '@angular/core';
import {CustomerService} from "../shared/customer.service";
import {Customer} from '../model/customer';
import {ActivatedRoute, Router} from "@angular/router";
import {Observable} from "rxjs";
import {CustomerDetails} from "../model/customer-details";
import {CustomerDetailsDialog} from "../modal/customer-details/customer-details-dialog";
import {MatDialog} from "@angular/material";
@Component({
selector: 'app-customer-list',
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
customers$: Observable<Customer[]>;
customerDetails$: Observable<CustomerDetails>;
constructor(private customerService: CustomerService, private router: Router, private activatedRoute: ActivatedRoute, public dialog: MatDialog) {
}
ngOnInit() {
this.customers$ = this.customerService.customersView();
}
onRemove(id: number) {
this.customerService
.remove(id)
.subscribe(
customer => console.log('Customer ' + customer + ' successfully removed'),
error => console.log('Something went terribly wrong: ' + error.message),
() => setTimeout(() => this.ngOnInit(), 150)
);
}
onPreDetailsCustomer(id: number) {
this.customerDetails$ = this.customerService.getOne(id);
}
openDialog(customerId: number) {
const dialog = this.dialog.open(CustomerDetailsDialog, {
data: {
id: this.customerDetails$
}
}
);
dialog.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
此外，我为模态组件创建了一个模态目录。
customer-details-dialog.ts看起来像：
@Component({
selector: 'customer-details-dialog',
templateUrl: 'customer-details-dialog.html',
})
export class CustomerDetailsDialog {
customer$: Observable<CustomerDetails>;
constructor(public dialog: MatDialog,
private customerService: CustomerService,
private activatedRoute: ActivatedRoute,
private router: Router,
@Inject(MAT_DIALOG_DATA) public data: CustomerDetails) {
}
ngOnInit() {
const id = this.activatedRoute.snapshot.params['id'];
this.customer$ = this.customerService.getOne(id);
}
}
customer-details-dialog.html看起来像：
<div *ngIf="(this.customer$ | async) as customer; else loading">
{{customer.name}}
</div>
<div *ngIf="(this.customer$ | async) as customer; else loading">
{{customer.email}}
</div>
<div *ngIf="(this.customer$ | async) as customer; else loading">
{{customer.phoneNumber}}
</div>
<ng-template #loading>
Loading stuff in ngIf...
</ng-template>
点击详细信息按钮后，我收到：
Loading stuff in ngIf...在模式窗口中，因为未加载有关客户的特定信息，并且由于无法从对象接收ID，我们正尝试加载#loading组件。
此外，在控制台中，我收到：
GET http://localhost:8080/api/customer/undefined 400
预先感谢您的帮助。
答案 0 :(得分：0)
像这样使用MatDialogRef模板：
@Component({
templateUrl: 'customer-details-dialog.html',
})
export class CustomerDetailsDialog {
customer$: Observable<CustomerDetails>;
constructor(public dialog_ref: MatDialogRef< CustomerDetailsDialog >,
private router: Router,
@Inject( MAT_DIALOG_DATA ) public data?: string) {
}
ngOnInit() {
if ( this.data )
this.customer$ = this.customerService.getOne(this.data);
}
static open( dialog: MatDialog, id: string ): Observable< boolean> {
return dialog.open(CustomerDetailsDialog,
{ data: id, disableClose: true }).afterClose();
}
}
然后只需从组件中调用CustomerDetailsDialog.open并传递对话框和ID。