如何在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(' ');  
    }
}

每次更新模型时，都会更新字数。

希望这可以帮助。