Angular: TextArea 显示不同的行不同的字符数

Question

Angular：TextArea 在 table 下定义为第 5 列，现在实施更改以包括字符计数，计数可见 但对于所有行，仅显示第一行计数。

例如，假设第一行 Textarea 计数为 23，那么对于所有行 ，无论该 TextArea 中存在的数据如何，所有行的计数都显示为 23。

另外，当我编辑第一行时，所有行数都在变化..

因此如何使不同的行显示特定于该行的计数 TextArea

下面是我实现的代码

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;
}

我正在使用 Angular primeNG table 与下面完全一样

Answer 1

问题是您要为所有行分配一个全局变量，而不是为每一行分配一个特定变量。在 [(ngModel)]="value" 上，您应该分配 rowData 计数，例如 [(ngModel)]="rowData[value]"，其中 rowData 是您的当前行。

你的 html 必须是这样的：

<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是你的textArea值，不知道你用的是哪个属性。

在你的 .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;
 }

Angular: TextArea 显示不同的行不同的字符数

Angular: TextArea show different rows different character count

javascript

typescript

primeng

angular