[英]Reusable angular component has same data as previous one - input datalist
I am trying to make a simple reuable component - an input box with data list that shows as dropdown.我正在尝试制作一个简单的可重用组件 - 一个带有显示为下拉列表的数据列表的输入框。 Everything is fine except when I try to reuse this component, then all the lists contain data same as the first component on the webpage.
一切都很好,除非我尝试重用此组件,然后所有列表都包含与网页上第一个组件相同的数据。 The component is called "app-reuable-filter" and here is how it is invoked:
该组件称为“app-reuable-filter”,它的调用方式如下:
<app-reuable-filter
[params]="{filterName: 'tktNum', filterLabel: 'Ticket Number...'}"
(filterChosen)="onFilterChosen($event, 'tktNum')"
></app-reuable-filter>
<app-reuable-filter
[params]="{filterName: 'assigned', filterLabel: 'Assigned To...'}"
(filterChosen)="onFilterChosen($event, 'assigned')"
></app-reuable-filter>
Component HTML组件 HTML
<div class="col">
<input
type="text" class="form-control" list="dl1" (click)="clearFilter()" (change)="fireEvent()"
[placeholder]="params.filterLabel" [(ngModel)]="chosenValue"
>
<datalist id="dl1">
<option *ngFor="let _ of listOfVals">{{ _.valueField }}</option>
</datalist>
</div>
Typescript Typescript
import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core';
@Component({
selector: 'app-reuable-filter',
templateUrl: './reuable-filter.component.html',
styleUrls: ['./reuable-filter.component.css']
})
export class ReuableFilterComponent implements OnInit {
listOfVals: {}[] = [];
chosenValue: string;
@Input() params: any;
@Output('filterChosen') filterClicked = new EventEmitter<string>();
constructor() { }
ngOnInit(): void {
this.fetchFilters();
}
fetchFilters(): void {
if (this.params.filterName === "assigned") this.listOfVals.push({ valueField : 'a1'});
else this.listOfVals.push({ valueField : 'b1'});
}
clearFilter(): void {
this.chosenValue = '';
this.fireEvent();
}
fireEvent(): void {
this.filterClicked.emit(this.chosenValue);
}
}
After this I expect to see two inputs with drop-down lists with placeholders in them as "Ticket Number..." and "Assigned..." respectively.在此之后,我希望看到两个带有下拉列表的输入,其中的占位符分别为“票号...”和“已分配...”。 And that's how it shows, but I also expect to see "b1" and "a1" as single items in the drop-down lists respectively.
这就是它的显示方式,但我也希望在下拉列表中分别看到“b1”和“a1”作为单个项目。 Which I don't;
我没有; both the lists contain "b1" as the only selectable item.
两个列表都包含“b1”作为唯一的可选项目。
If I try to reuse this component once more, then no matter what I provide in "fetchFilters()" method, I'll still see "b1" as the only item to choose in this new component as well.如果我再次尝试重用这个组件,那么无论我在“fetchFilters()”方法中提供什么,我仍然会看到“b1”是这个新组件中唯一可以选择的项目。 I know that the values being passed in "params" are reaching the "fetchFilters()" method, I verified with console.log.
我知道在“params”中传递的值正在到达“fetchFilters()”方法,我用console.log 进行了验证。
I do not understand why this is happening and how do I ensure that lists are loaded with correct values that I provide?我不明白为什么会发生这种情况,如何确保列表加载了我提供的正确值? Do I have to separate "list" parameter of "input tag" for each component instead of hardcoding as "dl1"?
我是否必须为每个组件分隔“输入标签”的“列表”参数而不是硬编码为“dl1”?
I found the problem, it was indeed the "list" parameter, which needs to be dynamic, otherwise it keeps pointing to the first list which gets created due to a hardcoded value "dl1".我发现了问题,它确实是“列表”参数,它需要是动态的,否则它会一直指向由于硬编码值“dl1”而创建的第一个列表。 Below is the code to how I fixed it (Component HTML)...
下面是我如何修复它的代码(组件 HTML)...
<div class="col">
<input
type="text" class="form-control" [attr.list]="params.filterName" (click)="clearFilter()"
(change)="fireEvent()" [placeholder]="params.filterLabel" [(ngModel)]="chosenValue"
>
<datalist [id]="params.filterName">
<option *ngFor="let _ of listOfVals">{{ _.valueField }}</option>
</datalist>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.