时间戳

首页 > 解决方案 > Angular中的Textarea不显示文本

node.js - Angular中的Textarea不显示文本

问题描述

首先，如果我听起来很傻，我很抱歉，但我是 Angular 的新手，所以请理解。

我在数据库中有一个模式，它由一个答案字段组成。用户填写答案并提交，以便将他的答案添加到数据库中。

现在，当用户单击 Edit Answer 按钮时，用户将被重定向到一个新组件。

在 component.ts 文件中，我声明了一个全局变量，并在 HTML 中发送它的值。但是，当我在内部使用 [(ngModel)] 时，我的文本区域显示为空白。当我不添加 [(ngModel)] 时，文本就会出现。

我想要实现的两件事：

1) 从打印在 .ts 文件中的全局变量中获取文本。

2) 更新此文本并将其存储回 .ts 文件中的相同或其他变量中。

//.html

<div class="form-group" *ngIf="answers">
<textarea name="ans" [(ngModel)]="ans" rows="5" class="form- 
control">
{{answers.data.answer}}</textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" (click)="submitAnswer(ans)">
Update Answer
</button>
</div>

// .ts

export class EditanswerComponent implements OnInit {
qaId: any;
question: any;
answers: any;
constructor(
private route: ActivatedRoute,
private apiService: ApiserviceService) {
console.log(this.route.snapshot);
}

ngOnInit() {
this.route.params.subscribe(params => {
this.qaId = params;
});

this.apiService.viewAnswerById(this.qaId.aId).subscribe(ansObj => {
console.log("Answer Object", ansObj);
this.answers = ansObj;
console.log(this.answers.data.answer);
});
}

submitAnswer(ans) {
this.answers = ans;
console.log(this.answers);
}
}

标签： node.jsangularmongodb

解决方案

您不需要{{answers.data.answer}}在 textarea 中使用：

<textarea name="ans" [(ngModel)]="ans" rows="5" class="form- 
control">
{{answers.data.answer}}</textarea>

只需绑定到即可NgModel，如果您的模型ans有任何值，它将显示在文本区域中。

<textarea name="ans" [(ngModel)]="ans" rows="5" class="form- 
    control"></textarea>

或者您可以[(ngModel)]= "answers?.data.answer"在文本区域设置：

<textarea name="ans" [(ngModel)]="answers?.data.answer" rows="5" class="form- 
    control"></textarea>

推荐阅读