导航时如何使第一个组件的选择的client_id不被擦除 [英] How to make that the client_id selected of the first component to not erased when I navigate
本文介绍了导航时如何使第一个组件的选择的client_id不被擦除的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有2个相互导航的不同组件.
I have 2 different component that navigate in each other.
- 我创建发票，添加一些数据并选择客户名称，然后单击添加产品".
- 我添加产品，然后在发票组件中导航.当我在发票中导航时，客户端名称将被删除.
对于发票组件I中的其他数据，我有解决方案，但是对于客户，我有问题.
For other data in invoice component I solution, but, for client I have a problem.
创建类似于以下代码的数据服务:
Create a data service like code below:
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中编写以下代码:
And in InvoiceComponent write this code:
client:Client [];
client: Client[];
{
let invoice = '';
if (this.ss.getData('invoice')) {
invoice = this.ss.getData('invoice');
}
let invoicedate = '';
if (this.ss.getData('invoicedate')) {
invoicedate = this.ss.getData('invoicedate');
}
let notes = '';
if (this.ss.getData('notes')) {
notes = this.ss.getData('notes');
}
let clientid = '';
if (this.ss.getData('clientid')) {
clientid = this.ss.getData('clientid');
}
this.addsale = this.fb.group({
'invoice_number': new FormControl(invoice, [Validators.required, Validators.nullValidator]),
'invoice_date': new FormControl(invoicedate, Validators.required),
'client_id': new FormControl(clientid, Validators.required),
'notes': new FormControl(notes, Validators.required),
'products': this.fb.array([]),
});
}
ngOnInit() {
this.ws.getAllClients().subscribe(
client => {
console.log(client)
this.client = client;
}
);
}
saveData() {
this.ss.setData('invoice', this.addsale.get('invoice_number').value);
this.ss.setData('invoicedate', this.addsale.get('invoice_date').value);
this.ss.setData('notes', this.addsale.get('notes').value);
this.ss.setData('clientid', this.addsale.get('client_id').value);
}
onSelect(clientid) {
this.selectedClient = null;
for (let i = 0; i < this.client.length; i++) {
if (this.client[i].client_id === clientid) {
this.selectedClient = this.client[i];
}
}
}
仅客户端未显示，所有数据均正确显示.
Only client doesn't show , all data show correctly.
对于client_id，我编写以下代码:
For client_id I write this code:
HTML代码:
<div class="input-field col s4">
<fieldset>
<legend>Client Data,</legend>
<div class="input-field col s12">
<select (change)="onSelect($event.target.value)" [(ngModel)]="selectedClient.client_id" formControlName="client_id" id="client_id"
materialize="material_select" [materializeSelectOptions]="client">
<option value="" disabled selected>Name :</option>
<option *ngFor="let item of client" [value]="item.client_id">{{item.clientName}}</option>
</select>
</div>
<br>
<div class="input-field col s12" class="ndryshim">
No Cel:
<p>{{selectedClient.contactNo}}</p>
<br>
</div>
<br>
<div class="input-field col s12" class="ndryshim">
Address:
<p>{{selectedClient.address}}</p>
<br>
</div>
</fieldset>
</div>
请问有什么主意吗?
谢谢
更改:
我这样更改我的html代码:
I change my html code like this:
<div class="input-field col s4">
<fieldset>
<legend>Client Data,</legend>
<div class="input-field col s12">
<input formControlName="client_id" id="client_id" matInput placeholder="Select Client*" aria-label="State" [matAutocomplete]="auto"
autoActiveFirstOption [formControl]="client_id">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith" >
<mat-option (onSelectionChange)="updateClient($event, item.client_id, 'client_id')" *ngFor="let item of filteredOptionsClient | async"
[value]="item.clientName">
{{ item.clientName }}
</mat-option>
</mat-autocomplete>
</div>
<br>
<div class="input-field col s12">
Phone:
<span style="color:darkblue">{{selectedClient.contactno}}</span>
</div>
<div class="input-field col s12">
Address:
<span style="color:darkblue">{{selectedClient.address}}</span>
</div>
</fieldset>
</div>
在ts代码中，我会这样更改:
And in ts code I change like this:
filteredOptionsClient: any;
client_id: FormControl = new FormControl();
client: Client[];
{
let invoice = '';
if (this.ss.getData('invoice')) {
invoice = this.ss.getData('invoice');
}
let invoicedate = '';
if (this.ss.getData('invoicedate')) {
invoicedate = this.ss.getData('invoicedate');
}
let notes = '';
if (this.ss.getData('notes')) {
notes = this.ss.getData('notes');
}
let clientid = '';
if (this.ss.getData('clientid')) {
clientid = this.ss.getData('clientid');
}
this.addsale = this.fb.group({
'invoice_number': new FormControl(invoice, [Validators.required, Validators.nullValidator]),
'invoice_date': new FormControl(invoicedate, Validators.required),
'client_id': new FormControl(clientid, Validators.required),
'notes': new FormControl(notes, Validators.required),
'products': this.fb.array([]),
});
}
ngOnInit() {
this.cs.getAllClients().subscribe(
client => {
this.client = client.map((clients) => {
this.filteredOptionsClient = this.client_id.valueChanges.pipe(
startWith(''),
map(val => this.filterClient(val))
);
return new Client(clients);
});
}
);
}
filterClient(val: string): Client[] {
if (val) {
let filterValue = val.toLowerCase();
return this.client.filter(client => client.clientName.toLowerCase().startsWith(filterValue));
}
return this.client;
}
saveData() {
this.ss.setData('invoice', this.addsale.get('invoice_number').value);
this.ss.setData('invoicedate', this.addsale.get('invoice_date').value);
this.ss.setData('notes', this.addsale.get('notes').value);
this.ss.setData('clientid', this.addsale.get('client_id').value);
}
updateClient(ev: any, idd: any, componentid: any) {
if (ev.isUserInput) {
if (componentid === 'client_id') {
this.clientid = idd;
this.addsale['controls']['client_id'].setValue(ev.source.value);
} else {
console.log('ooops');
}
}
let selectedClient = new Client('')
this.selectedClient = null;
for (let i = 0; i < this.client.length; i++) {
if (this.client[i].client_id === idd) {
this.selectedClient = this.client[i];
}
}
}
}
推荐答案
如果存在客户端ID，则从ngOnInit()调用onSelect
call onSelect from ngOnInit() if client id exist
ngOnInit() {
this.ws.getAllClients().subscribe(
client => {
console.log(client)
this.client = client;
if (this.ss.getData('clientid')) {
const clientid = this.ss.getData('clientid');
onSelect(clientid);
}
}
);
}
这篇关于导航时如何使第一个组件的选择的client_id不被擦除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
