我正在学习平均值堆栈。我正在执行CRUD操作。我被update
卡住了。不完全是行动。实际上,在更新以前发布的article
之前,我想加载文本字段中的内容以进行最终更改。这些文本字段是title
和content
。其中title
是一个简单的文本字段,content
是quill
文本编辑器值。这里是我的articles.component.html
Title:<br>
<input type="text" id="title-container" name="title" >
<br>
Content:<br>
<input type="text" id="content-container" name="content">
<br><br>
<input type="submit" value="Submit">
这是我的article.component.ts当我单击edit
按钮时,从其他地方调用此方法。
onPress2(id) {
this._articleService.fetchArticle(id)
.subscribe (
data => {
document.querySelector('#title-container').innerHTML=data.title;
document.querySelector('#content-container').innerHTML=data.content;
}
);
}
如果我用value
替换innerHTML
,一切都可以完美地工作。但是我不能这样做,因为我的content
字段的值类似于<h1>How to make Cheese cake</h1><br>...
,因为我使用的是quill
文本编辑器。请告诉我这个代码有什么问题。
3条答案
按热度按时间n1bvdmb61#
我觉得你想要的只是
lx0bsm1f2#
我对html元素做了更多的研究。以下是我的观察和解决方案。你不能在
input
标签上使用innerHTML
,因为它是一个自关闭的标签,而innerHTML
顾名思义,它与同时具有开始和结束标签的标签一起工作。div
、'span'等。innerHTML
和value
是两个不同的东西。解决方案
代替
input
标签,你可以使用div
并添加一个属性contentEditable="true"
,这将使它像输入字段一样可编辑:这将解决问题。在
ts
文件中。你很好用途:bogh5gae3#
innerHTML
属性用于访问或修改元素中的HTML内容。但是,input元素是HTML中的void元素,这意味着它不能有任何HTML内容或子元素。Void元素,如input、img或br,没有结束标记,也不能包含其他元素。因此,尝试访问或修改输入元素的innerHTML将无法正常工作,因为它没有任何HTML内容。