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>

假设最初显示OrNot = 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']”）的函数在继续执行$（“[custom-name ='smth']”）之前在DOM中实际呈现.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);
    }

}

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

在每次点击中使用$（＆＃34; [custom-name =＆＃39; smth＆＃39;]＆＃34;）听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属性），而是为了测试它的必要性。

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

2 个答案: