web-dev-qa-db-fra.com

Angular 4 get élément dom

Salut, j'essaie de mettre l'accent sur un élément d'entrée une fois que le bouton d'édition est cliqué sur une application Angular 4.

J'ai d'abord essayé Renderer2, mais cela ne semble pas fonctionner à cette fin.

Maintenant, j'essaye de l'obtenir en utilisant @ViewChild, j'obtiens toujours une valeur non définie.

J'événement a essayé d'implémenter AfterViewInit et de journaliser l'élément immédiatement une fois chargé, mais je reçois toujours undefined. S'il vous plaît aider ..

        import { Component, OnInit, Input, Output, EventEmitter, Renderer2, ViewChild, AfterViewInit } from '@angular/core';
        import { NgIf } from '@angular/common';
        import { DataService } from '../data.service';
        import { NgForm } from '@angular/forms';

        @Component({
            selector: 'app-artist-list-item',
            template: `
                    <button class="w3-button w3-circle w3-orange" (click)="edit(nameInput)"><i class="fa fa-pencil"></i></button>
                    <span *ngIf="editable">
                        <input  class="name" #nameInput (keyup)="onKey(nameInput.value)" (keypress)="inputEnter($event)" [value]="artist.name">
                        <button class="w3-button w3-green btn-save" (click)="save()">Save</button>
                    </span>
                    <span *ngIf="!editable">
                        {{artist.name}}
                    </span>
            `,
            styleUrls: ['./artist-list-item.component.scss']
        })
        export class ArtistListItemComponent implements OnInit, AfterViewInit {

            @Input() artist: any;
            @Output() onDelete = new EventEmitter();
            @Output() onEdit = new EventEmitter();
            @Output() onSave = new EventEmitter();
            @ViewChild('nameInput') nameInput;

            public editable: boolean = false;
            name: any = '';

            constructor(private Data: DataService, private rd: Renderer2) { }

            ngAfterViewInit() {
                console.log(this.nameInput);
            }

            ngOnInit() {
            }

            edit(el) {
                console.log(el);
                console.log(this.nameInput);
                this.editable = true;
                this.name = this.artist.name;
            }

        }

par la façon dont j'ai supprimé le code où j'ai essayé de mettre l'accent.

            edit(el) {
                console.log(el);
                console.log(this.nameInput);
                this.nameInput.focus();
                this.editable = true;
                this.name = this.artist.name;
            }
angulartypescriptsingle-page-application
6
Bmax

Selon votre code, nameInput ne sera là que lorsque editable est vrai. Ici aussi, votre valeur par défaut pour modifiable est définie sur false (public editable: boolean = false). Donc, l'élément n'est même pas présent dans DOM, c'est la raison pour laquelle il vous donne undefined même lorsque vous appelez ngAfterViewInit.

 <span *ngIf="editable">
     <input  class="name" #nameInput (keyup)="onKey(nameInput.value)" (keypress)="inputEnter($event)" [value]="artist.name">
     <button class="w3-button w3-green btn-save" (click)="save()">Save</button>
 </span>
3
monica

Vous devez accéder à la propriété nativeElement sur l'élément que vous avez défini dans votre @ViewChild déclaration pour manipuler l'élément DOM réel. Appeler @ViewChild seul crée simplement un ElementRef vers un élément dans le DOM. C'est pourquoi vous devez accéder à la propriété nativeElement de ElementRef pour manipuler l'élément DOM. Par exemple:

ngAfterViewInit() {
    console.log(this.nameInput.nativeElement);
}

Ceci est un excellent article sur les abstractions DOM en angulaire .

9
joshrathke