Issue
I am using a PrimeNg dropdown and passing its options using a function. However, it is being called infinite number of times. Will this cause an issue with the performance or any other factor, and if so, is there a workaround?
HTML:
<tabset>
<tab *ngFor="let item of countries" [heading]="item.country">
<div class="mb-5 col-md-6">
<label for="state" class="col-lg-12 form-label">State</label>
<p-dropdown [options]="getStates(item.countryId)" name="stateId" placeholder="Select State" optionLabel="name" optionValue="id" [showClear]="true"> </p-dropdown>
</div>
</tab>
</tabset>
TS:
getStates(countryId: number): StateDto[] {
console.log('getting states');
return this.stateMap.filter(x => x.countryId == countryId)[0]?.states;
}
Solution
You should replace [options]="getStates(item.countryId)"
with a pure pipe like `[options]="item.countryId | getStates".
Create a pipe, and add the logic for retrieve the stats inside.
Then, only if item.countryId
change the method inside pure pipe is called.
Answered By - user1075296
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.