Несколько текстовой области с autosize не работает в ionic3

Question

Я использую множественную текстовую область с автоматическим изменением размера, используя ionic3 и angular, но она работает только для одной текстовой области. Могу ли я получить руководство по решению этой проблемы. Ниже приведены мои коды

home.html

<ion-list [formGroup]="editForm">  
 <ion-item>
  <ion-label floating class="label">Description1</ion-label>
  <ion-textarea autosize formControlName="desc"></ion-textarea>
 </ion-item>
<ion-item>
  <ion-label floating class="label">Description2</ion-label>
  <ion-textarea autosize formControlName="desce"></ion-textarea>
 </ion-item>
</ion-list>

Home.ts

import { Component, Directive, OnInit, HostListener, ElementRef } from '@angular/core';

@IonicPage()

@Component({
selector: 'page-home',
templateUrl: 'home.html',
 })
  @Directive({
  selector: 'ion-textarea[autosize]'
  })
 export class Home implements OnInit {
 @HostListener('input', ['$event.target'])
  onInput(textArea: HTMLTextAreaElement): void {
    this.adjust();
}
 constructor(public element: ElementRef,){}
 ngOnInit(): void {
    setTimeout(() => this.adjust(), 0);
}

adjust(): void {
    let textArea = 
    this.element.nativeElement.getElementsByTagName('textarea')[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + "px";
 }
}

Answer 1

Это работает только для одной текстовой области, потому что вы сказали, чтобы она запускалась только на первой в массиве

let textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];

getElementsByTagName возвращает массив всех текстовых областей на экране. Таким образом, вы должны попытаться перебрать их. Нечто похожее на:

const textAreas = this.element.nativeElement.getElementsByTagName('textarea');
textAreas.forEach(textArea => {
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + "px";
});

В качестве дополнительного примечания вы можете рассмотреть возможность использования ViewChild / ViewChildren в будущем. Это правильный способ работы с / доступом к элементам dom напрямую в угловом формате, и его следует использовать, когда это возможно

Я привел быстрый пример использования ViewChildren здесь Использование угловых документов для ViewChildren и другого сообщения stackoverflow