如何在使用 Angular 6 导航到另一个组件时确保客户端安全

Question

我有 2 个不同的组件相互导航。就像在这个演示中一样

1. 我创建发票，选择客户名称，invoice_name和描述，最后单击添加产品。
2. 我添加产品，并在发票组件中导航。当我在发票中导航时，客户名称被删除。

对于发票组件I解决方案中的其他数据，但是，对于客户，我有一个问题。

创建类似于以下代码的数据服务：

export class DataService {
_data = new Map<string, any>();
setData(key, value) {
this._data.set(key, value);
}
getData(key) {
return this._data.get(key);
}
clear() {
this._data = new Map<string, any>();
}
}

在InvoiceComponent中编写以下代码：

export class AutocompleteDisplayExample implements OnInit {
clientid: number;
selectedClient: User;
addsale: FormGroup;
products: Array<Products> = [];
myControl = new FormControl();
id_client: FormControl = new FormControl();
options: User[] = [
{ id_client: '1', name: 'Mary', phone: '654987' },
{ id_client: '2', name: 'Shelley', phone: '123456' },
{ id_client: '3', name: 'Igor', phone: '00365987' }
];
filteredOptions: Observable<User[]>;
constructor(
public service: Service,
private fb: FormBuilder,
private router: Router,
private dService: DataService
) {
let invoice = '';
if (this.dService.getData('invoice')) {
invoice = this.dService.getData('invoice');
}
let description = '';
if (this.dService.getData('description')) {
description = this.dService.getData('description');
}
let id_client = '';
if (this.dService.getData('id_client')) {
id_client = this.dService.getData('id_client');
}
this.addsale = this.fb.group({
'invoice_number': new FormControl(invoice, Validators.required),
'description': new FormControl(description, Validators.required),
'id_client': new FormControl(id_client, Validators.required)
});
}
ngOnInit() {
this.filteredOptions = this.id_client.valueChanges
.pipe(
startWith<string | User>(''),
map(value => typeof value === 'string' ? value : value.name),
map(name => name ? this._filter(name) : this.options.slice())
);
this.allproducts();
this.service.productList.subscribe(productList => {
this.products = productList;
this.addsale.controls.Subtotal.setValue(this.subtotal)
});
}
get subtotal() {
return this.products
.map(p => p.price * p.quantity)
.reduce((a, b) => a + b, 0);
}
allproducts() {
this.products = this.service.getProduct();
}
displayFn(user?: User): string | undefined {
return user ? user.name : undefined;
}
private _filter(name: string): User[] {
const filterValue = name.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
}

updateClient(ev: any, idd: any, componentid: any) {
if (ev.isUserInput) {
if (componentid === 'id_client') {
this.clientid = idd;
console.log('idd', idd)
this.addsale['controls']['id_client'].setValue(ev.source.value);
} else {
console.log('ooops');
}
}
}
saveData() {
this.dService.setData('invoice', this.addsale.get('invoice_number').value);
this.dService.setData('description', this.addsale.get('description').value);
this.dService.setData('id_client', this.addsale.get('id_client').value);
}
navigate() {
this.saveData();
this.router.navigate(['/prod']);
}
}

仅客户端不显示，所有数据都正确显示。

为了client_id我编写以下代码：

网页代码：

<form [formGroup]="addsale" (ngSubmit)="onaddsale()" class="col s12">
<h4 style="text-align:center">add sale</h4>
<div class="contant">
<div class="row">
<fieldset>
<legend>Client Data</legend>
<div class="input-field col s4">
<mat-form-field class="example-full-width">
<input formControlName="id_client" id="id_client" matInput placeholder="Select Client*" aria-label="State" [matAutocomplete]="auto"
autoActiveFirstOption [formControl]="id_client">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option (onSelectionChange)="updateClient($event, option.id_client, 'id_client')" *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
</fieldset>
<br>
<div class="input-field col s4">
invoice_number:
<input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
</div>
<div class="input-field col s4">
description:
<input formControlName="description" id="description" type="text" class="validate">
</div>
</div>
</div>
<br>    
<button type="submit">
Register sale
</button>
<br>
<br>
</form>

请问有什么想法吗？ 我必须保留所有发票值，例如invoice_name和描述。谢谢！

谢谢

图片说明：

第 1 步： 图像 第 2 步： 图像 第 3 步： 图像

Answer 1

您需要在客户端对象中指定属性名称以获取客户端名称

您需要在ts文件中进行更改

'id_client': new FormControl(id_client.name, Validators.required)

和在 HTML 中

<input formControlName="id_client" id="id_client" matInput placeholder="Select Client*" aria-label="State" [matAutocomplete]="auto"
autoActiveFirstOption [formControl]="id_client.name">

工作演示 https://stackblitz.com/edit/angular-9sijka-jo8bub?file=app/autocomplete-display-example.ts