webentwicklung-frage-antwort-db.com.de

Angular 4 get dom element

Hallo, ich versuche, den Fokus auf ein Eingabeelement zu setzen, sobald auf die Schaltfläche Bearbeiten in einer Angular 4-Anwendung geklickt wird.

Zuerst habe ich Renderer2 ausprobiert, aber es scheint für diesen Zweck nicht zu funktionieren.

Jetzt versuche ich es mit @ViewChild zu bekommen, ich bekomme immer Wert als undefiniert.

Ich habe versucht, AfterViewInit zu implementieren und das Element sofort nach dem Laden zu protokollieren, aber ich erhalte immer noch "undefiniert". Bitte helfen Sie ..

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

        }

übrigens habe ich den Code entfernt, in dem ich versucht habe, den Fokus zu setzen.

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

Entsprechend Ihrem Code wird nameInput nur dort sein, wenn editable wahr ist. Auch hier ist Ihr Standardwert für editable auf false gesetzt (public editable: boolean = false). Das Element ist also nicht einmal in DOM vorhanden, was der Grund ist, warum es Ihnen undefinierte Informationen gibt, selbst wenn Sie ngAfterViewInit aufrufen.

 <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

Sie müssen auf die Eigenschaft nativeElement des Elements zugreifen, das Sie in Ihrer @ViewChild - Deklaration definiert haben, um das eigentliche DOM-Element zu bearbeiten. Wenn Sie nur @ViewChild aufrufen, wird ein ElementRef für ein Element im DOM erstellt. Daher müssen Sie auf die Eigenschaft nativeElement von ElementRef zugreifen, um das DOM-Element zu bearbeiten. Beispielsweise:

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

Dies ist ein großartiger Artikel über DOM-Abstraktionen in Angular .

9
joshrathke