[英]Angular2 unable to set DOM element attribute is hidden with ngIf?
I have the following div and a button: 我有以下div和一个按钮:
<div *ngIf="shownOrNot" custom-name="smth" data-x="3" data-y="4"><div>Test</div></div>
<button (click)="showAndSetX()">Show and Change</button>
Assuming shownOrNot = false initially, when I click the button, it triggers this function in component: 假设最初显示showOrNot = false,当我单击按钮时,它将在组件中触发此功能:
showAndSetX() {
this.shownOrNot = !this.shownOrNot;
$("[custom-name='smth']").attr('data-x', 5);
console.log($("[custom-name='smth']").attr('data-x'));
}
The problem is, when I first click on the button to hide the div, I see "3" logged, which is correct. 问题是,当我第一次单击按钮以隐藏div时,我看到记录为“ 3”,这是正确的。 When I click on it again however, I see "undefined".
但是,当我再次单击它时,我看到“未定义”。 When I click on it again, then I see "3" logged.
当我再次单击它时,我看到记录为“ 3”。
How can I make it such that I can set the attribute after it is displayed? 如何使它显示后可以设置属性? Or is there an alternative to this?
还是有替代方法?
UPDATE: I also tried it with .data instead of .attr, same behavior. 更新:我也尝试使用.data而不是.attr进行相同的行为。 Its almost like I have to do:
几乎就像我要做的那样:
this.shownOrNot = !this.shownOrNot; this.shownOrNot =!this.shownOrNot; // insert function that waits for $("[custom-name='smth']") to actually render in DOM before continuing to do $("[custom-name='smth']").attr('data-x', 5);
//插入要等待$(“ [custom-name ='smth']”)在DOM中实际呈现的函数,然后再继续执行$(“ [custom-name ='smth']”)。attr('data- x',5);
The names of the functions are different 功能名称不同
showAndSetX() and shownOrNot() showAndSetX()和shownOrNot()
That is easy. 那很简单。
first you implement AfterViewInit interface then your component should be like below: 首先,您实现AfterViewInit接口,然后您的组件应如下所示:
import {Component, AfterViewInit} from '@angular/core';
@Component({ /* ... */ })
export class PostComponent implements AfterViewInit {
// your jquery DOM saver
dom;
// ... default check it on true because jquery can get DOM on View initialize
shownOrNot = true;
constructor() { }
// initialize your DOM
ngAfterViewInit()
{
this.dom = $("[custom-name='smth']");
}
showAndSetX() {
console.log(this.dom.attr('data-x'));
this.shownOrNot = !this.shownOrNot;
this.dom.attr('data-x', 5);
}
}
UPDATE: a little bit of more information on your sample code. 更新:有关您的示例代码的更多信息。
in every click listen DOM request with $("[custom-name='smth']") but when angular *ngIf directive hidden the DOM you can't create a new DOM with jquery selector on that so Jquery return undefined because can't find requested DOM. 在每次单击时都使用$(“ [custom-name ='smth']”)侦听DOM请求,但是当angular * ngIf指令隐藏了DOM时,您将无法使用jQuery选择器创建新的DOM,因此Jquery返回undefined,因为找不到请求的DOM。
one another way is use angular 2 like below 另一种方式是使用如下所示的角度2
<div *ngIf="shownOrNot" [attr.data-x]="xValue" [attr.data-y]="yValue"><div>Test</div></div>
<button (click)="showAndSetX()">Show and Change</button>
and your component class should be similar below 和您的组件类应该在下面类似
dom;
shownOrNot = true;
xValue = 3;
yValue = 4;
constructor() { }
ngAfterViewInit()
{
this.dom = $("[data-name='smth']");
}
showAndSetX() {
console.log(this.dom.attr('data-x'));
this.shownOrNot = !this.shownOrNot;
this.xValue = this.xValue == 3 ? 10 : 3;
setTimeout(() => { console.log(this.dom.attr('data-x')); });
}
actually don't need (dom property) but for testing its necessary. 实际上并不需要(dom属性),而是用于测试其必要性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.