我有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中编写以下代码：
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];
}
}
}
仅客户端未显示，所有数据均正确显示。
对于client_id，我编写以下代码：
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代码：
<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代码中，我会这样更改：
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];
}
}
}
}
答案 0 :(得分：0)
如果客户端ID存在，则从ngOnInit（）调用onSelect
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);
}
}
);
}