Angular2无法设置DOM元素属性被ngIf隐藏？

Question

我有以下div和一个按钮：

<div *ngIf="shownOrNot" custom-name="smth" data-x="3" data-y="4"><div>Test</div></div>
<button (click)="showAndSetX()">Show and Change</button>

假设最初显示showOrNot = false，当我单击按钮时，它将在组件中触发此功能：

showAndSetX() {
this.shownOrNot = !this.shownOrNot;
$("[custom-name='smth']").attr('data-x', 5);
console.log($("[custom-name='smth']").attr('data-x'));
}

问题是，当我第一次单击按钮以隐藏div时，我看到记录为“ 3”，这是正确的。 但是，当我再次单击它时，我看到“未定义”。 当我再次单击它时，我看到记录为“ 3”。

如何使它显示后可以设置属性？ 还是有替代方法？

更新：我也尝试使用.data而不是.attr进行相同的行为。 几乎就像我要做的那样：

this.shownOrNot =！this.shownOrNot; //插入要等待$（“ [custom-name ='smth']”）在DOM中实际呈现的函数，然后再继续执行$（“ [custom-name ='smth']”）。attr（'data- x'，5）；

Answer 1

功能名称不同

showAndSetX（）和shownOrNot（）

Answer 2

那很简单。

首先，您实现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);
    }

}

更新：有关您的示例代码的更多信息。

在每次单击时都使用$（“ [custom-name ='smth']”）侦听DOM请求，但是当angular * ngIf指令隐藏了DOM时，您将无法使用jQuery选择器创建新的DOM，因此Jquery返回undefined，因为找不到请求的DOM。

另一种方式是使用如下所示的角度2

<div *ngIf="shownOrNot" [attr.data-x]="xValue" [attr.data-y]="yValue"><div>Test</div></div>
<button (click)="showAndSetX()">Show and Change</button>

和您的组件类应该在下面类似

    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')); });
    }

实际上并不需要（dom属性），而是用于测试其必要性。