如何在angular5中使用split在wordcount中

Question

我正在嘗試在textarea中進行字數統計，但頁面加載后會顯示Words：1。 這是什么問題，我需要做什么。 誰能告訴我。

提前致謝。

我的component.html

<textarea [(ngModel)]="review.Roman" name="Roman" id='text' required></textarea>
<p>Words:{{value.length}}</p>

我的component.ts

export class PostReviewComponent implements OnInit {
    value: any = {};
    reviews: Reviews[];
    review: Reviews = {
        Roman:''
    };

    ngOnInit() {
        var str = this.review.Roman;
        this.value = str.split(' ');
    }
}

我的Reviews數組中沒有更多的值，這里我只顯示羅馬字。

Answer 1

let re = /\s/g

this.value=str.split(re) 

您只需要使用RE代替硬編碼空間

讓我知道是否有任何問題

Answer 2

頁面加載后顯示的原因是由於ngOnInit方法中包含的代碼會在頁面加載時執行。

最好的方法是使用角形管道，並使用這種方式可以在代碼中的任何地方重新利用。 有這樣的事情：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'wordsCount'})
export class WordsCountPipe implements PipeTransform {
  transform(value: string): number {
    return value.split(' ').length;
  }
}

然后在您的component.html

<textarea [(ngModel)]="review.Roman" name="Roman" id='text' required></textarea>
<p>Words:{{value | wordsCount}}</p>

注意 ：請記住在聲明數組中注冊自定義管道。

編輯 ：如果您不想使用管道，則可以使用(ngModelChange)更新您的value屬性。

在您的component.html

<textarea [(ngModel)]="review.Roman" (ngModelChange)="valueChanges($event)"></textarea><br>
{{value.length}}

然后在您的component.ts添加valueChanges方法：

export class PostReviewComponent implements OnInit {
    value: any = [];
    reviews: Reviews[];
    review: Reviews = {
        Roman:''
    };

    ngOnInit() {
    }

    valueChanges(modelValue: string) {
        this.value = modelValue.split(' ');  
    }
}

每次更新模型時，都會更新字數。

希望這可以幫助。