使用 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>
答案 0 :(得分:1)
在您使用 textarea
的第二个 [ngModel]="comments"
中,将其更改为 [ngModel]="comments.toString()"
,或者更好地使用 *ngFor
显示评论。
答案 1 :(得分:0)
我认为您的声明 this.comments: string[];
有问题,您不能使用 this
关键字进行声明。同时,如果您想使用字符串数组,那么您可以像 comments
一样启动 comments: string[]=[];
或者您可以使用如下所示的构造函数 =>
comments: string[]=[];
constructor(){
this.comments=[];
}
那么您必须使用 [ngModel]="comments.toString()"
而不是 [ngModel]='comments'
。
注意:这是工作演示代码链接Stackblitz LINK。
答案 2 :(得分:0)
您需要将 name="comments"
和 #comments='ngModel'
添加到您的 textarea 元素才能使 ngModel 工作