[英]Using getElementById to select element in parent component - Angular 5
I'm trying to select an element in a parent component, from a child component. 我正在尝试从子组件中选择父组件中的元素。
In my child component I have the following code: 在我的子组件中,我有以下代码:
removeItem(outcome) {
const el = (<HTMLInputElement>document.getElementById(outcome.id));
el.classList.remove("selected-bet");
//...
}
and the item I am trying to select is the id (outcome.id) that is in the parent component: 而我要选择的项目是父组件中的ID(outcome.id):
<ng-container *ngFor="let outcome of market.Outcomes">
<div class="market-cell-3" id="{{outcome.id}}">
<span class="market-name">{{ outcome.name}}.</span>
</div>
</ng-container>
When I try the above code, el is always null and I get the following error 当我尝试上面的代码时,el始终为空,并且出现以下错误
BetSlipComponent.html:78 ERROR TypeError: Cannot read property 'classList' of null BetSlipComponent.html:78错误TypeError:无法读取null的属性“ classList”
What is the correct way to do this? 正确的方法是什么?
To give some more details about the structure of the app: The parent controller displays a list of sporting markets, and the child component is like a shopping cart. 提供有关应用程序结构的更多详细信息:父控制器显示体育市场列表,子组件就像购物车。 When a user selects a market in the parent, a class is added (selected-bet) and it is added to the cart. 当用户在父级市场中选择一个市场时,将添加一个类(选择下注)并将其添加到购物车中。 There is a remove button (removeItem(outcome)) in the cart and its from there I am experience the problem. 购物车中有一个删除按钮(removeItem(outcome)),从那里我就遇到了问题。
Don't try to touch the DOM manually when using Angular. 使用Angular时,请勿尝试手动触摸DOM。 It's wrong on every level. 在每个级别上都是错误的。 For example, you can bind to a class of an element like this: 例如,您可以像这样绑定到元素的类:
<ng-container *ngFor="let outcome of market.Outcomes">
<div class="market-cell-3" [class.selected-bet]="!outcome.removed">
<span class="market-name">{{ outcome.name}}.</span>
</div>
</ng-container>
removeItem(outcome) {
outcome.removed = true;
}
I actually found some help from here . 我实际上从这里找到了一些帮助。 While it works, I'm not convinced its the right way to do it. 虽然有效,但我不认为它是正确的方法。 I used an Output EventEmitter in the child component to send the id to the parent: 我在子组件中使用了Output EventEmitter来将ID发送给父组件:
@Output() removeBetSelected = new EventEmitter<number>();
And in the removeItem() I added this: 在removeItem()中,我添加了以下内容:
this.removeBetSelected.emit(outcome.outcomeId)
Add it to the child component 将其添加到子组件
<bet-slip (removeBetSelected)=removeBetSelected($event)></bet-slip>
And in the parent component I had this function which finds the correct object from the outcomes QueryList and remove the class: 在父组件中,我具有此函数,该函数从结果QueryList中查找正确的对象并删除该类:
@ViewChildren('outcome') outcomes:QueryList<any>;
public removeBetSelected(outcomeId) {
const outcomeObj = this.outcomes.toArray().find(obj => obj.nativeElement.id == outcomeId );
outcomeObj.nativeElement.classList.remove('selected-bet')
}
While it works, this all seems mental just to remove a class. 尽管它起作用了,但是这似乎只是删除一个类的想法。 There surely is a better way. 当然有更好的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.