Angular: TextArea show different rows different character count

问题

Angular: TextArea is defined under the table as 5th column, now implemented changes to include character count, Count is visible but for all rows only the 1st row count is showing.

For example say 1st row Textarea count is 23, then for all rows irrespective of data present in that TextArea, count is showing 23 for all rows.

Plus when i am editing 1st row then all rows count is changing..

Hence how to make different row show count specific to that row TextArea

Below is the code implemented by me

HTML

<ng-template pTemplate="body" let-rowData>
  <td>
    <div class="textarea-wrapper">
      <textarea pInputTextArea [(ngModel)]="rowData.value" (ngModelChange)="valueChange(rowData.value)"
        maxlength="1000">
   </textarea>
      <span class="remaning">{{remainingText}}</span>
    </div>
  </td>
</ng-template>

.ts

 valueChange(value) {
    this.remainingText = 1000 - value;
 }

CSS:

.textarea-wrapper {
  position: relative;
}

.remaning {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

I am using Angular primeNG table exactly like below Angular 6 PrimeNG - how to add a checkbox with distinct values from one column?

回答1:

The problem is you are assigning a global variable to all rows, instead of specific one for each row. On the [(ngModel)]="value" you should assign the rowData count, like [(ngModel)]="rowData[value]" where rowDatais your current row.

Your html has to be like this:

<ng-template pTemplate="body" let-rowData>
  <td>
   <div class="textarea-wrapper">
    <textarea pInputTextArea [(ngModel)]="rowData.value" 
     (ngModelChange)="valueChange(value,rowData)" maxlength="1000">        
    </textarea>
    <span class="remaning">{{rowData.remainingText}}</span>
  </div>
</td>

rowData.value is your textArea value, I don't know which attribute do you use.

On your .ts:

valueChange(value,rowData) {
    rowData.remainingText = rowData.remainingText || 1000; // remainingText is the value from your textarea, and rowData the whole object
    rowData.remainingText = 1000 - rowData.remainingText.length;
 }

来源：https://stackoverflow.com/questions/59051266/angular-textarea-show-different-rows-different-character-count

标签

javascript

angular

typescript

primeng