财产名称＆＃39;类型＆＃39; AppComponent＆＃39;上不存在

时间：2017-09-19 22:27:31

标签： 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" 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">&times;</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>

然而..

我立即ng build --prod，我收到此错误：

它抱怨的究竟是什么样的错误？为什么现在抱怨，但不是在我运行ng serve？

时
  

错误   NG：///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html   （18,151）：财产＆＃39;名称＆＃39;类型＆＃39; AppComponent＆＃39;上不存在。   错误在ng：///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html   （23,104）：物业＆＃39;网络＆＃39;类型＆＃39; AppComponent＆＃39;上不存在。       错误在ng：///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html   （32,161）：财产＆＃39; phone_number＆＃39;在类型上不存在   ＆＃39; AppComponent＆＃39 ;.       错误在ng：///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html   （37,122）：物业＆＃39; internet_package＆＃39;在类型上不存在   ＆＃39; AppComponent＆＃39 ;.       错误在ng：///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html   （18,139）：财产＆＃39;名称＆＃39;类型＆＃39; AppComponent＆＃39;上不存在。       错误在ng：///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html   （23,46）：物业＆＃39;网络＆＃39;类型＆＃39; AppComponent＆＃39;上不存在。       错误在ng：///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html   （32,38）：属性＆＃39; phone_number＆＃39;在类型上不存在   ＆＃39; AppComponent＆＃39 ;.       错误在ng：///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html   （37,46）：物业＆＃39; internet_package＆＃39;在类型上不存在   ＆＃39; AppComponent＆＃39;

修改

这是我的AppComponent：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { PurchaseService } from './purchase.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  busy: boolean;

  constructor(public purchase: PurchaseService) {}

  onSubmit(data) {
    console.log(data);
  };
}

5 个答案:

答案 0 :(得分：5)

在此行中，您尝试绑定到名为name

的变量 
<input type="text" class="form-control" id="customerName" aria-describedby="emailHelp" placeholder="e.g Pantang Francias"
        name="name" [(ngModel)]="name">

组件中没有name变量，因此出错。

答案 1 :(得分：0)

我通过在实现OnInit的TS文件类中声明[(ngModel)]的属性来获得它。

HTML文件

 <input type="text" 
        class="form-control"
        id="customerName"
        aria-describedby="emailHelp"
        placeholder="e.g Pantang Francias"
        name="name" 
        [(ngModel)]="name_test">

TS文件

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name_test: String = "";
}

只需专注于name_test，您就会得到答案。

学习愉快！

答案 2 :(得分：0)

在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中。

答案 3 :(得分：0)

最近遇到了同样的问题，所以也许这对你有帮助。

  1. 将 FormsModule 添加到您的 app.modules.ts 中
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
....
    FormsModule
  ],
...
})
  1. 通过添加在 ts 文件中声明这些变量 name!: string; 或 network!: any;
    2. 的其他类型

答案 4 :(得分：0)

很明显，我们可以看到，您还没有在 AppComponent 文件中声明变量 name、network、phone_number 等。

相关问题
最新问题