错误：无法将值"$event"分配给模板变量 "address" 。模板变量是只读的

Question

我是angular的新手，所以我使用模板驱动的表单，我想使用API的响应绑定数据，

getAdress(f: FormGroup) {
this.checkOut.getAdress(f.controls.email.value).subscribe((response: any) => {
this.address = response.Address[0].address
this.City = response.Address[0].city
this.postalAddress = response.Address[0].postalAddress
console.log(response)
})
}

我的HTML代码

<div class="card">
<div class="card-title">SHIPPING ADDRESS</div>
<hr />
<div class="card-body">
<form #f="ngForm">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="firstName" class="form-label ms-3">First Name</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstName"
#firstName="ngModel"
[(ngModel)]="NAME"
aria-describedby="emailHelp"
required
minlength="5"
/>
<span
class="input-dirty"
*ngIf="!firstName?.valid && (firstName?.dirty || firstName?.touched)"
>
First Name required</span
>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input
type="text"
class="form-control"
name="lastName"
id="lastName"
#lastName="ngModel"
ngModel
required
minlength="5"
/>
<span
class="input-dirty"
*ngIf="!lastName?.valid && (lastName?.dirty || lastName?.touched)"
>Last Name required</span
>
</div>
</div>
</div>
<div class="mb-3">
<label for="address" class="form-label">Address</label>
<input
type="text"
class="form-control"
name="address"
id="address"
#address="ngModel"
required
minlength="20"
[(ngModel)]="address"
/>
<span class="input-dirty" *ngIf="!address?.valid && (address?.dirty || address?.touched)">
Enter valid Address</span
>
<input type="text" class="form-control mt-1" name="address" id="address" />
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="state" class="form-label">country</label>
<select class="form-select" aria-label="Default select example">
<option selected>Select Country</option>
<option value="1">India</option>
<option value="2">USA</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="zipcode" class="form-label">ZIP/Postal Code</label>
<input
type="text"
class="form-control"
name="zipcode"
id="zipcode"
#zipcode="ngModel"
[(ngModel)]="postalAddress"
required
minlength="5"
(change)="ngOnChanges(f)"
/>
<!-- <div class="text-danger"
*ngIf="registerForm.controls.zipcode.touched">
Email is required</div> -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="city" class="form-label">City</label>
<input
type="text"
class="form-control"
name="city"
id="city"
[(ngModel)]="City"
#city="ngModel"
required
minlength="4"
/>
<span class="input-dirty" *ngIf="!city?.valid && (city?.dirty || city?.touched)">
Enter valid City</span
>
</div>
</div>
<div class="col-md-6">
<label for="state" class="form-label">state/province</label>
<input
type="text"
class="form-control"
name="state"
id="state"
ngModel
#state="ngModel"
required
minlength="4"
/>
<span class="input-dirty" *ngIf="!state?.valid && (state?.dirty || state?.touched)">
Enter valid state</span
>
</div>
</div>
</form>
</div>
</div>

错误日志

• 错误:Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):错误:无法赋值"$event"到模板变量"address"模板变量是只读的。在_AstToIrVisitor。visitPropertyWrite (/home/inficloud gorilla_wireless_UI/node_modules/@angular/编译器/包/compiler.umd.js: 9048:31)在PropertyWrite。访问(/home/inficloud/gorilla_wireless_UI/node_modules/@angular/编译器/包/compiler.umd.js: 7666:28)/home/inficloud/gorilla_wireless_UI/node_modules/@angular/compiler/bundles/compiler.umd.js:8615:49@angular/compiler/bundles/compiler.umd.js:21240:27在对象。参数(/home/inficloud/gorilla_wireless_UI/node_modules/@angular/编译器/包/compiler.umd.js: 22417:24)在/home/inficloud/gorilla_wireless_UI/node_modules/@angular/编译器/包/compiler.umd.js: 22155:94在数组中。map ()在/home/inficloud/gorilla_wireless_UI/node_modules/@angular/编译器/包/compiler.umd.js: 22155:60在/home/inficloud/gorilla_wireless_UI/node_modules/@angular/编译器/包/compiler.umd.js: 21406:87在数组中。map ()在TemplateDefinitionBuilder。buildTemplateFunction (/home/inficloud gorilla_wireless_UI/node_modules/@angular/编译器/包/compiler.umd.js: 21406:60)/home/inficloud/gorilla_wireless_UI/node_modules/@angular/compiler/bundles/compiler.umd.js:23179:58@angular/compiler-cli/src/ngtsc/annotations/src/component.js:807:34@angular/compiler-cli/src/ngtsc/transform/src/compile .js:731:39@angular/compiler-cli/src/ngtsc/transform/src/compile .js:762:21在IvyCompilationVisitor。visitClassDeclaration (/home/inficloud gorilla_wireless_UI/node_modules/@angular/compiler-cli/src/ngtsc/转换/src/transform.js: 56:43)

Answer 1

检查此部分:

TemplateRef name(address)和ngModel value (address)必须不同这意味着id应该不同于ngModel

试试这个

#selectedAddress="ngModel"
minlength="20"
[(ngModel)]="address"

Answer 2

Error: Cannot assign value "$event" to template variable "digit1". Template variables are read-only.

当在ngModel='digit1'和@ViewChild('digit1')上使用相同的名称时，我得到了这个错误。

<ion-input #digitinput1 type="number" [(ngModel)]="digit1" [ngModelOptions]="{standalone: true}"></ion-input>

你必须使用不同的名字