Eigenschaft 'Name' existiert nicht für den Typ 'AppComponent'

Question

Unten ist mein Formular. Funktioniert gut während ng serve -o. Keine Probleme aufgetreten. Keine Fehler ausgelöst.

<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> 

jedoch ..

Sofort ng build --prod ich, bekomme ich diesen Fehler:

Genau das, was irgendwie Fehler wird darüber zu beschweren? Warum beschwert es sich jetzt, aber nicht wenn ich die ng serve starte?

ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html (18,151): Property 'name' does not exist on type 'AppComponent'. ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html (23,104): Property 'network' does not exist on type 'AppComponent'. ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html (32,161): Property 'phone_number' does not exist on type 'AppComponent'. ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html (37,122): Property 'internet_package' does not exist on type 'AppComponent'. ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html (18,139): Property 'name' does not exist on type 'AppComponent'. ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html (23,46): Property 'network' does not exist on type 'AppComponent'. ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html (32,38): Property 'phone_number' does not exist on type 'AppComponent'. ERROR in ng:///home/khophi/Developments/Angular/BuyUnifi/src/app/app.component.html (37,46): Property 'internet_package' does not exist on type 'AppComponent'.

bearbeiten

Das ist mein 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); 
    }; 
} 

Answer 1

In dieser Zeile Sie auf eine Variable name

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

Es rief zu binden, sind versucht, ist nein name vari in Ihrer Komponente, daher der Fehler.