Question

我正在尝试在textarea中进行字数统计，但是在页面加载后显示：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方法中包含的代码会在页面加载时执行。

最好的方法是使用angular pipes，并使用这种方法可以在代码的任何地方重新利用。像这样：

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

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

希望这会有所帮助。

如何在angular5中使用split在wordcount中

2 个答案: