Here is a small illustration of my problem. I have an HTML table with elements and a drop down list
If the user clicks on in, all records with type in are displayed
I don't know how to do it but while searching the internet I came across this page.
When I select in, my HTML table becomes empty, it doesn't fetch the record.
Do you know why?
service.ts
@Injectable({
providedIn: 'root'
})
export class CorporateActionService {
startDate = new Date("");
prea = [{
num: "758-1184511-34",
svm: "000902988",
type: "in",
quantity: "12,00",
isin: "BE0003470755",
title: "SOLVAY BE",
},
{
num: "758-1184511-34",
svm: "000902987",
type: "out",
quantity: "11,25",
isin: "BE0152676954",
title: "AXA B FD EQUITY BELGIUM",
},
]
dataList = [{
code: 1,
name: "in"
},
{
code: 2,
name: "out"
},
]
constructor() {}
}
component.ts
export class CorporateActionComponent implements OnInit {
prea: any;
dataList: any;
brandName = {};
constructor(private service: CorporateActionService) {}
ngOnInit(): void {
this.prea = this.service.prea;
this.dataList = this.service.dataList;
this.brandName = this.dataList.brandName;
}
public selectedBrand: any;
public valueSelected() {
this.prea = this.service.prea.filter(
item => item.num === this.selectedBrand
);
}
}
component.html
<div >
<h1 >Corporate Action</h1>
<div >
<div style="width: 100%;">
<div >
<div >
<select [(ngModel)]="selectedBrand" (change)="valueSelected()">
<option>Select</option>
<option *ngFor="let item of dataList;let i = index" value="{{item.code}}" [selected]="i == 0">
{{item.name}}
</option>
</select>
</div>
<table >
<thead >
<tr >
<th scope="col">Client</th>
<th scope="col">N° de préavis</th>
<th scope="col">Type</th>
<th scope="col">Quantité</th>
<th scope="col">ISIN</th>
<th scope="col">Titre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let line of prea">
<td scope="row" >{{ line.num }}</td>
<td scope="row" >{{ line.svm }}</td>
<td scope="row" >{{ line.type }}</td>
<td scope="row" >{{ line.quantity }}</td>
<td scope="row" >{{ line.isin }}</td>
<td scope="row" >{{ line.title }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Here is a reproduction.
CodePudding user response：
Two things:
Change the value of the options to item.name since that's how you identify them
<option *ngFor="let item of dataList;let i = index" value="{{item.name}}" [selected]="i == 0">
And filter the array by type since that's where your in and out properties are.
public valueSelected() {
this.prea = this.service.prea.filter(
(item) => item.type === this.selectedBrand
);
}