如何在angular5中使用split5 for wordcount-Java 学习之路

我正在尝试在textarea中执行wordcount，但它显示在页面加载后单词：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(' ');
    }
}

我在我的评论数组中有更多的值，我只显示罗马 .

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>

Note ：记得在声明数组中注册自定义管道 .

EDIT ：如果您不想使用管道，可以使用 (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(' ');  
    }
}

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

希望这可以帮助 .

回复于 2024-04-25T01:14:57+08:00

0
```
let re = /\s/g

this.value=str.split(re)
```
您只需要使用RE代替硬编码空间

如果有任何问题，请告诉我
回复于 2024-04-25T01:14:57+08:00

如何在angular5中使用split5 for wordcount

2 回答

相关问题