我正在尝试在下面的模板(value1
和value2
)中打印表单数据。 value1
正在按预期打印,但value2是空的。但是,如果我删除*ngIf = "true"
它工作正常。
<form class = "input-form" #inputForm="ngForm" *ngIf="true">
<input ngModel name="inputData" required>
<i>value1:{{inputForm.value|json}}</i>
</form>
<i>value2:{{inputForm.value|json}}</i>
它之所以不起作用,是因为结构指令*ngIf
在引擎盖下创建了一个新的模板引用。这样就不再可以访问inputForm
变量,因为这些变量不能跨模板共享。您需要在组件内部使用@ViewChild
来访问它。
基本上ngIf
做的是:
<ng-template [ngIf]="true">
<form class = "input-form" #inputForm="ngForm">
<input [(ngModel)]="inputValue" name="inputData" required>
<i>value1:{{inputValue|json}}</i>
</form>
</ng-template>
<i>value2:{{inputForm.value|json}}</i>
正如您所看到的,inputForm
现在位于其自己的模板中,并且无法在其外部访问。
在这里你可以看到一个工作的stack
使用* ngIf与<i>
不与<from>
<form class = "input-form" #inputForm="ngForm" >
<input ngModel name="inputData" required>
<i>value1:{{inputForm.value|json}}</i>
</form>
<i *ngIf="true">value2:{{inputForm.value | json}}</i>
或者你可以像这样使用
HTML:
<form class = "input-form" #inputForm="ngForm" *ngIf="true">
<input [(ngModel)]="inputValue" name="inputData" required>
<i>value1:{{inputValue|json}}</i>
</form>
<i>value2:{{inputValue|json}}</i>
打字稿:
inputValue: string;
你可以在ts中声明值并使用双重绑定[(ngModel)]="inputValue"
你能详细说明你的问题,以便我们能更好地理解吗?