Angular 2 - 錯誤沒有值名稱的窗體控件訪問器

Question

我正在使用Ionic 2框架，嘗試使用php從本地主機檢索數據，並在應用程序上顯示。我能夠從數據庫中爲我的第一頁（listingPage）獲取數據，但是，當涉及到第二頁（StoreInfoPage）時，我接收到錯誤：沒有值名稱的表單控件訪問器。我不確定我做錯了哪一部分。

另外，我只打算顯示數據，不應該有任何更新/刪除/插入。我不確定我是否以正確的方式進行操作，感謝所給予的任何幫助和建議。

listing.html

<ion-item *ngFor="let listing of listings"> 
<ion-avatar item-start> 
    <img height="60" width="60" src="xxx.jpg"> 
</ion-avatar> 
    <h2 class="payment_color">{{ listing.ListingTitle }}</h2> 
    <p>{{ listing.ListingDate }} {{ listing.ListingTime }}</p> 
<ion-note item-end> 
<p><button (click)="viewEntry({ record: listing })" ion-button color="danger">Apply</button></p> 
    </ion-note> 
</ion-item> 

listing.ts

import { Component } from '@angular/core'; 
import { NavController,ModalController } from 'ionic-angular'; 
import { ActionSheetController } from 'ionic-angular'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Component({ 
selector: 'page-list', 
templateUrl: 'listview.html' 
}) 

export class ListPage { 

public listings : any = []; 

constructor(public navCtrl: NavController, 
public actionSheetCtrlCat: ActionSheetController, 
public actionSheetCtrljob_type: ActionSheetController, 
public actionSheetCtrlLoc: ActionSheetController, 
public actionSheetCtrlSal: ActionSheetController, 
public modalCtrl: ModalController, 
public http: Http 
){} 

ionViewWillEnter(){ 
this.load(); 
} 

load() 
{ 
this.http.get('http://localhost/php-mysql/retrieve- 
data.php') 
.map(res => res.json()) 
.subscribe(data => 
{ 
    this.listings = data; 
}); 
} 

viewEntry(param) 
{ 
    this.navCtrl.push('StoreInfoPage', param); 
} 

storeInfo.html

<ion-row> 
<ion-card> 
    <img src="xxx.jpg"> 
    <div class="card-title">xxx</div> 
    <div class="card-subtitle">xxx</div> 
</ion-card> 
</ion-row> 

<ion-row> 
<ion-col col-12 text-center > 
<p formControlName="ListingDate" [(ngModel)]="ListingDate"> xxx</p> 
<p>xxx</p> 
    </ion-col> 
</ion-row> 

<ion-row> 
<ion-col col-12> 
    <h6>xxx</h6> 
    <p> xxx</p> 
    </ion-col> 
</ion-row> 

<div text-center> 
<button fab-center ion-button color="primary" 
(click)="applyAlert()"> 
    Apply 
</button> 
</div> 

</form> 

storeInfo.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, 
NavParams,ViewController,AlertController,ToastController } from ' 
ionic-angular'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { FormGroup, Validators, FormBuilder } from '@angular/forms'; 

@IonicPage() 
@Component({ 
selector: 'page-store-info', 
templateUrl: 'store-info.html', 
}) 

export class StoreInfoPage { 
public ListingDate  : any; 
public form   : FormGroup; 

constructor(public navCtrl: NavController, 
public navParams : NavParams, 
public viewCtrl : ViewController, 
public alertCtrl : AlertController, 
public http  : Http, 
public NP   : NavParams, 
public fb   : FormBuilder, 
) { 

    this.form = fb.group({ 
    "ListingDate" : ["", Validators.required], 
    }); 

} 

    ionViewWillEnter() 
    { 
    this.NP.get("record"); 
    } 

    selectEntry(listing) 
    { 
    this.ListingDate   = listing.ListingDate; 
    } 
    } 

Answer 1

我猜你的問題是這樣的在這裏storeInfo.html：

<p formControlName="ListingDate" [(ngModel)]="ListingDate"> xxx</p> 

看看在documentation的正確使用。 您應該使用此formControlName輸入表單內的輸入。