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> 

Допуская shownOrNot = ложь первоначально, когда я нажимаю кнопку, он запускает эту функцию в компоненте:

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

Проблема заключается в том, когда я сначала нажмите на кнопку, чтобы скрыть div, я вижу, что «3» зарегистрировано, что правильно. Однако, когда я нажимаю на него снова, я вижу «неопределенный». Когда я снова нажимаю на него, я вижу «3».

Как это сделать, чтобы я мог установить атрибут после его отображения? Или есть альтернатива этому?

UPDATE: Я также пробовал его с .data вместо .attr, такое же поведение. Его почти как я должен сделать:

это.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); 
    } 

} 

UPDATE: немного дополнительной информации о вашем примере кода.

в каждом щелчке прослушать запрос DOM с помощью $ ("[custom-name = 'smth']"), но когда угловая * ngIf-директива скрыла DOM, вы не можете создать новую DOM с селектором jquery, чтобы это возвращалось 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), но для проверки его необходимости.