web-dev-qa-db-fra.com

Angular 2 get Input input value

comment obtenir la valeur d'élément html en utilisant ionic 2

Ci-dessous mon code html

 <div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'" >
   <div *ngIf="chat.sender == currentuser || chat.receiver == currentuser">
    <div  *ngIf="chat.date" style="text-align: center;" >
           <p style="font-size:9px;" id="amount" #amount>{{chat.date | amDateFormat:'LL'}}</p>
           <input #myname [ngModel]="range" (ngModelChange)="saverange($event)"/>
         <input #myname type="text" value={{chat.date}}>
    </div>
   </div>
   <div class="message" *ngIf="chat.sender == currentuser || chat.receiver == currentuser" [ngClass]="{'me': currentuser == chat.sender}">
          <div class='image' *ngIf="chat.path" >
            <img *ngIf="chat.path" [src]="chat.path"/><br>
            <span *ngIf="chat.path_text">{{chat.path_text}}</span>
            <span style="font-size:9px;">{{chat.date | amDateFormat:'hh:mmA'}}</span>
          </div> 
           <div *ngIf="chat.message_text">
           <span>{{chat.message_text}}</span>
           <span style="font-size:9px;">{{chat.date | amDateFormat:'hh:mmA'}}</span>
           </div>
    </div>

Ci-dessous mon dossier ts

import { Component,Inject,ViewChild,ElementRef,AfterViewInit} from '@angular/core';

export class ChatPage implements AfterViewInit {
  @ViewChild('myname') input:ElementRef; 
  constructor(public modalCtrl: ModalController,public navCtrl: NavController) {}
   ngAfterViewInit() {
    console.log(this.input.nativeElement.value);
    }
  }

Les mêmes valeurs de date sont répétées. Je souhaite que les mêmes valeurs de date ne soient pas répétées.

Parce que je vais vérifier deux variables.

donc j'ai besoin de chat.date value.because j'ai lié la valeur de input.

je reçois cette erreur

Impossible de lire la propriété 'nativeElement' de non définie

Comment résoudre ce problème ou tout autre moyen de trouver des solutions.

Merci

angulartypescriptionic2
11
Anivaishu

J'ai créé un lien plnkr: https://plnkr.co/edit/49TEP8lB4lNJEKsy3IDq?p=preview

Cela fonctionne pour moi, alors vous voudrez probablement créer votre propre système afin que ppl puisse vous aider

export class ApiDemoApp{
  root = ApiDemoPage;
  @ViewChild('myname') input:ElementRef; 
  constructor() {
  }
  ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
  }
}
19
Hung Cao

Utilisez ce code 

@ViewChild('myname') input:any; 

ngAfterViewInit() {
 console.log(this.input.nativeElement.value) ;      
}
6
Mubashir

Votre élément input dépend de la condition *ngIf.

<div *ngIf="chat.sender == currentuser || chat.receiver == currentuser">
    <div  *ngIf="chat.date" style="text-align: center;" >

           <input #myname [ngModel]="range" (ngModelChange)="saverange($event)"/>
         <input #myname type="text" value={{chat.date}}>
    </div>

ngIf manipule directement le DOM. Si la valeur est false, votre élément html et le conteneur div externe sont supprimés du DOM. Vérifiez ici C'est pourquoi votre ViewChild n'est pas définie. Vous devrez vérifier les mêmes conditions dans votre composant ou reconsidérer la logique d'accès à l'élément dans votre composant .

ngAfterContentInit() {
    console.log(this.input.nativeElement.value);
    }
1
Suraj Rao

Si vous souhaitez savoir si nativeElement contient des données vides, utilisez la propriété textContent.

Supposons que nous ayons la sortie HTML suivante de nativeElement.outerHTML:

<div _ngcontent-c8="" checkifelementempty="" class="some-class">
  <div _ngcontent-c8="">
     <b><i>&nbsp;a</i></b>
  </div>
</div>

Pour vérifier si le texte HTML ci-dessus est vide, utilisez ceci: !nativeElement.textContent.trim()

0
Arsen Khachaturyan