Question

使用 Angular 6 和 Material 控件，我在只读文本区域中显示我的数据（字符串数组）。我有第二个可编辑文本区域，我想在其中输入文本，然后使用按钮将第二个区域中的文本动态添加到（第一个）只读文本区域。

我也尝试过单向绑定和插值。调试的时候可以看到我的新文本被推送到了数据字符串数组中。无论如何，更新后的字符串数组不会显示在第一个文本区域中。

this.comments: string[];
this.newComment: string;

this.comments = data;
this.newComment = '';

addNewComment(newComment: string) {
    if (newComment.length > 0) {
        this.comments.push(newComment + '\n');
        this.newComment = '';
        this.saModified = true;
    }
}

<mat-form-field>
  <textarea matInput id='newComment' name='newComment' [disabled]="!userHasRole('Admin')" rows='8' cols='15' style='text-align: left; border:solid 1px black;' [(ngModel)]='newComment'></textarea>
  </mat-form-field>
  <button type='button' mat-raised-button color='primary' name='add-new-comment' (click)='addNewComment(newComment)' [disabled]=!userHasRole('Admin') || loading">Add Comment</button>
<mat-form-field>
  <textarea matInput readonly id='comments' name='comments' [disabled]="!userHasRole('Admin')" rows='8' cols='15' style='text-align: left; border:solid 1px black;' [ngModel]='comments'></textarea>
</mat-form-field>

Answer 1

在您使用 textarea 的第二个 [ngModel]="comments" 中，将其更改为 [ngModel]="comments.toString()"，或者更好地使用 *ngFor 显示评论。

Answer 2

我认为您的声明 this.comments: string[]; 有问题，您不能使用 this 关键字进行声明。同时，如果您想使用字符串数组，那么您可以像 comments 一样启动 comments: string[]=[]; 或者您可以使用如下所示的构造函数 =>

comments: string[]=[];
constructor(){
  this.comments=[];
}

那么您必须使用 [ngModel]="comments.toString()" 而不是 [ngModel]='comments'。
注意：这是工作演示代码链接Stackblitz LINK。

Answer 3

您需要将 name="comments" 和 #comments='ngModel' 添加到您的 textarea 元素才能使 ngModel 工作

Angular 6 readonly textarea 不会从第二个 textarea 绑定

3 个答案: