角2 - 名前付きフォームコントロールの値アクセッサーがありません

Question

私は、Ionic 2フレームワークを使用していて、phpを使用してローカルホストからデータを取り出し、アプリケーションに表示しようとしています。私は最初のページ（listingPage）のためにデータベースからデータを取得することができますが、2番目のページ（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を使用する必要があります。