создать reamore кнопку в угловых с JavaScript

Question

Мне нужно вернуть мне все теги, имеющие класс containtText, и я могу найти значение этого тега более 300 символов и использовать продолжить для значения. ,,

Но когда я использую этот код:

<div class=" col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-0">
<div class="row m-auto topbar col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 p-3 mb-3">
    <span (click)="close()">
        <i class="fas fa-times"></i>
    </span>
</div>
<div class=" mian-content form-inline content col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2 pb-3">
    <div *ngFor="let item of globalModel;let i=index"
        class="form-group justify-content-start col-md-12 col-xl-12 col-sm-12 col-xl-12 col-lg-12 pt-2">
        <div class="col-md-2 col-xl-2 col-lg-2 col-sm-12 col-lg-2">
            <label><strong>{{item.name | translate }} :</strong></label>
        </div>
        <div *ngIf="!item.isDate && !item.isBoolean && !item.isImage" class="showMore col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
            <label class="lbl">
                <span  class="spanArea">
                    {{item.value}}
                    <span class="">
                        <button mat-button (click)="FindLenghtString(item.value,i)" color="accent">Accent</button>
                    </span>
                </span>
            </label>

        </div>
        <div *ngIf="item.isBoolean" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
            <label class="lbl" *ngIf="item.value && !item.isDate">
                <span> <i class="fa fa-check-circle ic-green"></i></span>
            </label>
            <label class="lbl" *ngIf="!item.value && !item.isDate">
                <span> <i class="fa fa-ban ic-red"></i> </span>
            </label>
        </div>
        <div *ngIf="item.isImage" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
            <label class="lbl" *ngIf="item.value && !item.isDate">
                <span (click)="openDialog(item.value)" class="show-img-box">
                    <i class="fa fa-search"></i>
                    {{'POST.PREVIEW' | translate}}
                </span>
            </label>
        </div>
        <div *ngIf="item.isDate" class=" col-md-9 col-xl-9 col-lg-9 col-sm-12 col-lg-9 containtText">
            <label class="lbl"
                *ngIf="item.isDate && lang=='fa'"><span>{{item.value | date: 'dd/MM/yyyy hh:mm'}}</span></label>
            <label class="lbl" *ngIf="item.isDate && lang!='fa'"><span>{{ item.value | jalali }}</span> </label>
        </div>
    </div>
</div>

ts:

   Elipses(): void {
    console.log(document.getElementsByClassName('containtText'));
  }

это показывает мне:

HTMLCollection []

и это значение:

, но когда мне нужно получить значение 2он показывает мне undefined

  console.log(document.getElementsByClassName('containtText')['2']);

как я могу получить значение 2 и изменить это ?????

Answer 1

Можете ли вы попытаться вызвать функцию Elipses() после создания представления? Я предложил следующее в комментарии

ngOnInit(){
  setTimeout(()=>this.Elipses()); 
}

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

Answer 2

Во-первых, я бы не использовал jQuery или простой JavaScript, если у меня Angular: D

Во-вторых, ['2'] это индекс, так почему '2'? : D

Простое решение на Angular: Страница:

<div>
  {{text}}
</div>
<button (click)="showText()>{{buttonName}}</button>

Компонент:

text = string;
fullText = "Really long text";
buttonName = "Show more";

ngOnInit(){
  text = fullText.substring(0, 5);
}

showText(){
  if(text.length === 5){
    text = fullText;
    buttonName= "Show less";
  } else {
    text = fullText.substring(0, 5);
    buttonName = "Show more";
  }
}