如何在angular5中使用split5 for wordcount

loading...


0

我正在尝试在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(' ');
    }
}

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

loading...

2回答

  • 0

    它在页面加载后显示的原因是由于 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(' ');  
        }
    }
    

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

    希望这可以帮助 .


  • 0
    let re = /\s/g
    
    this.value=str.split(re)
    

    您只需要使用RE代替硬编码空间

    如果有任何问题,请告诉我

评论

暂时没有评论!