Angulaire 4 obtenir de l'élément du dom

Salut, je suis en train de définir le focus sur un élément d'entrée une fois que le bouton modifier est cliqué sur Angulaire 4 application.

J'ai d'abord essayé Renderer2, mais il ne semble pas fonctionner pour ce but.

Maintenant, je vais essayer de l'obtenir à l'aide de @ViewChild, je suis toujours valeur undefined.

J'ai tenté la mise en œuvre de AfterViewInit et l'enregistrement de l'élément immédiatement une fois chargé, mais encore, je reçois "indéfini". 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 enlevé le code où j'ai essayé de mettre le focus.

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

OriginalL'auteur Bmax | 2017-07-30

  1. 3

    En fonction de votre code, nameInput uniquement lorsque editable est vrai. Ici aussi, votre valeur par défaut modifiable est défini sur false(public editable: boolean = false). Si l'élément n'est même pas présent dans le DOM, ce qui est la raison pour laquelle il est de vous donner indéfini, 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>
    c'est la bonne réponse n'est pas ci-dessous, on peut vous suggérer un moyen pour résoudre ce

    OriginalL'auteur monica

  2. 9

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

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

    C'est un grand article sur les DOM Abstractions Angulaire.

    OriginalL'auteur joshrathke