Angular 2 получить значение входного элемента

как получить значение элемента html с помощью ионного 2

Ниже моего 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>

Ниже моего 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);
    }
  }

Повторяются те же значения даты. Я хочу, чтобы те же самые значения даты не повторялись.

Потому что я проверю две переменные.

поэтому мне нужно значение chat.date. Потому что я привязал значение ввода. Но я не могу получить значение входного элемента.

Я получаю эту ошибку

Невозможно прочитать свойство "nativeElement" из undefined

Как исправить эту проблему. Или любой другой способ найти сокращения.

Спасибо

Ответы

Ответ 1

Я создал ссылку plnkr: https://plnkr.co/edit/49TEP8lB4lNJEKsy3IDq?p=preview

Это работает для меня, поэтому, возможно, вы захотите создать свой собственный plnkr, чтобы ppl мог помочь

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

Ответ 2

Используйте этот код

@ViewChild('myname') input:any; 

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

Ответ 3

Ваш элемент input зависит от условий *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 непосредственно манипулирует DOM. Если значение false, ваш html-элемент вместе с внешним контейнером div удаляется из DOM. Проверьте здесьВот почему ваш ViewChild undefined. Вам нужно будет проверить те же условия в своем компоненте или пересмотреть логику, в которой вы обращаетесь к элементу вашего компонента. Попробуйте следующее:

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

Ответ 4

Используйте ngModel.

На основе вашего кода я сделал небольшое изменение, чтобы использовать ngModal. смотрите это.

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

export class ChatPage implements AfterViewInit {
  myname: string;
  constructor(public modalCtrl: ModalController,public navCtrl: NavController) {}
   ngAfterViewInit() {
    console.log(this.myname);
    }
  }

<input [(ngModel)]="myname" type="hidden" value="John Doe">

Ответ 5

Если кому-то интересно, как проверить, есть ли в nativeElement пустые данные, используйте свойство textContent.

Предположим, у нас есть следующий вывод HTML из nativeElement.outerHTML:

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

Чтобы проверить, есть ли в HTML пустой текст, используйте это: !nativeElement.textContent.trim()