Angular 财产';名称';不存在于类型';AppComponent';
下面是我的表格。在ng serve-o期间工作正常。没有提出任何问题。没有出现错误Angular 财产';名称';不存在于类型';AppComponent';,angular,Angular,下面是我的表格。在ng serve-o期间工作正常。没有提出任何问题。没有出现错误 <form #f="ngForm" (ngSubmit)="onSubmit(f.value)"> <div class="form-group"> <label for="customerName">Your Mobile Money Account Name</label> <input type="text" cl
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<div class="form-group">
<label for="customerName">Your Mobile Money Account Name</label>
<input type="text" class="form-control" id="customerName" aria-describedby="emailHelp" placeholder="e.g Pantang Francias"
name="name" [(ngModel)]="name">
<small id="emailHelp" class="form-text text-muted">This can be name used in registering the Mobile Money</small>
</div>
<div class="form-group">
<label for="network">Mobile Money Network</label>
<select class="form-control" name="network" id="network" aria-describeby="networkHelp" [(ngModel)]="network" required>
<option value="airtel-gh">Airtel Mobile Money</option>
<option value="tigo-gh">Tigo Cash</option>
<option value="mtn-gh">MTN Mobile Money</option>
</select>
<small id="networkHelp" class="form-text text-muted">We currently support only Airtel Mobile Money</small>
</div>
<div class="form-group">
<label for="number">Your Mobile Number</label>
<input type="number" name="phone_number" class="form-control" id="phone_number" placeholder="e.g 0269201707" aria-describeby="phone_numberHelp"
[(ngModel)]="phone_number" required maxlength="10">
<small id="phone_numberHelp">The Mobile Money number payment will come from. It should belong to you.</small>
</div>
<div class="form-group">
<label for="internet_package">Internet Package</label>
<select class="form-control" name="internet_package" id="internet_package" aria-describeby="packageHelp" [(ngModel)]="internet_package"
required>
<option value="1gig">1 Gig - 30 Days - 5 Cedis</option>
<option value="3gig">3 Gig - 30 Days - 10 Cedis</option>
<option value="10gig">10 Gig - 30 Days - 30 Cedis</option>
</select>
<small id="packageHelp" class="form-text text-muted">Choose your package</small>
</div>
<a class="btn btn-primary text-white" role="button" data-toggle="modal" data-target="#reviewPurchase">Review Purchase</a>
<!-- Review Purchase Modal -->
<div class="modal fade" id="reviewPurchase" tabindex="-1" role="dialog" aria-labelledby="reviewPurchase" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reviewPurchase">Review your Purchase</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul class="list-group">
<li class="list-group-item">Name: <strong>{{ f.value.name}}</strong></li>
<li class="list-group-item">Mobile Money Network: <strong>{{ f.value.network }}</strong></li>
<li class="list-group-item">Your Number: <strong>0{{ f.value.phone_number }}</strong></li>
<li class="list-group-item">Internet Package: <strong>{{ f.value.internet_package }}</strong></li>
</ul>
<hr>
<p class="lead text-center text-danger" *ngIf="!f.valid">
You have not fully completed the form. Go back and fill all the fields.
</p>
<p class="lead text-center" *ngIf="f.valid">
Proceed below if details above is correct.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" [disabled]="!f.valid" role="button" class="btn btn-primary">Make Payment</button>
</div>
</div>
</div>
</div>
</form>
在这一行中,您试图绑定到名为
name
<input type="text" class="form-control" id="customerName" aria-describedby="emailHelp" placeholder="e.g Pantang Francias"
name="name" [(ngModel)]="name">
组件中没有
name
变量,因此出现错误。我是通过在实现OnInit的TS文件类中声明[(ngModel)]
的属性得到它的
HTML文件
TS文件
@组件({
选择器:'应用程序根',
templateUrl:“./app.component.html”,
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
name_test:String=“”;
}
只要专注于name\u测试
你就会得到答案
学习愉快 在app.component.html中,您创建了一个包含输入字段的表单,并声明了绑定输入字段数据的模型
<input type="text" class="form-control" id="customerName" aria-describedby="emailHelp" placeholder="e.g Pantang Francias"
name="name" [(ngModel)]="name">
<select class="form-control" name="network" id="network" aria-describeby="networkHelp" [(ngModel)]="network" required>
<input type="number" name="phone_number" class="form-control" id="phone_number" placeholder="e.g 0269201707" aria-describeby="phone_numberHelp"
[(ngModel)]="phone_number" required maxlength="10">
这些型号-姓名、网络、电话号码需要添加到app.component.ts中它们是否都存在于组件中?@AlexanderLeonov编辑添加我的
AppComponent
,这是您的答案。您必须在组件中显式声明所有这些属性。JIT允许这种技巧,而AOT不允许。它抱怨的所有其他属性也是如此。
<input type="text" class="form-control" id="customerName" aria-describedby="emailHelp" placeholder="e.g Pantang Francias"
name="name" [(ngModel)]="name">
<select class="form-control" name="network" id="network" aria-describeby="networkHelp" [(ngModel)]="network" required>
<input type="number" name="phone_number" class="form-control" id="phone_number" placeholder="e.g 0269201707" aria-describeby="phone_numberHelp"
[(ngModel)]="phone_number" required maxlength="10">