我將一個 textarea 組件插入到我的模板中，如下所示：
<div class="card-body" *ngIf="isEditing">
<app-text-area input-id="body" input-value="This is my default input value"></app-text-area>
</div>
的模板app-text-area是這樣的：
<textarea
placeholder="This is my placeholder"
[name]="inputID"
(input)="onInputChanged($event)"
ngModel>
{{ inputValue }}
</textarea>
隨后呈現的 HTML 如下所示：
<textarea _ngcontent-owj-c62="" placeholder="This is my placeholder" ngmodel="" ng-reflect-model="" ng-reflect-name="body" class="ng-pristine ng-valid ng-touched">
This is my default input value
</textarea>
但是在實際頁面上，inputValue文本不會顯示在任何地方，textarea 就好像它是空的一樣，甚至顯示占位符文本。我可以看到 html 中的值，但是當我開始在框中鍵入時，它會替換它，就好像它不存在一樣。控制臺沒有顯示錯誤。
如果我ngModel從 textarea 中洗掉，它會修復它
我的app-text-area組件 ts 是：
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';
@Component({
selector: 'app-text-area',
templateUrl: './text-area.component.html',
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ],
styleUrls: ['./text-area.component.scss']
})
export class TextAreaComponent implements OnInit {
@Input("input-id") public inputID: string = "text";
@Input("input-value") public inputValue: string;
constructor() { }
ngOnInit(): void {
}
public onInputChanged(event: Event):void {
let newValue = (event.target as HTMLTextAreaElement).value;
this.inputValue = newValue;
}
}
uj5u.com熱心網友回復：
沒有看到 component.ts 檔案很難幫助但解決方案將是以下幾行：
HTML模板：
<textarea
[name]="inputID"
(input)="onInputChanged($event)"
[value]="inputValue">
</textarea>
<p>{{inputValue}}</p>
和 component.ts：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-text-area',
templateUrl: './text-area.component.html',
styleUrls: ['./text-area.component.css']
})
export class TextAreaComponent implements OnInit {
inputID:number=1;
inputValue:string="This is my placeholder";
constructor() { }
ngOnInit(): void {
}
onInputChanged(event:any){
this.inputValue=event.target.value;
}
}
這會將初始值設定為“這是我的占位符”，并會在 p 標簽內顯示的輸入中的每次更改時更新值
uj5u.com熱心網友回復：
我設法通過設定[ngModel]="inputValue"而不是defaultValue, value, 或放置inputValue在 textarea 本身來解決這個問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/352514.html