2016-07-04 9 views
0

私が取り組んでいるアプリケーションでは、権限によっては選択肢のリストが表示され、その他のものは制限されています。 IE Adminsはすべての店舗を見ることができます、通常のユーザーは自分で見ることができます。私は、次のマークアップを持っている:ここではAngist2のPristineフォームコントロールから値を取得する

<p *ngIf="storeList.length > 1"> 
    <label>Store:</label> 
    <select [(ngModel)]="storeNumber"> 
     <option></option> 
     <option *ngFor="let store of storeList" [value]="store.id">{{ store.name }} (#{{ store.internal_id }})</option> 
    </select> 
</p> 

<input *ngIf="storeList.length <= 1 type="text" [(ngModel)]="storeNumber" ngFor="let store of storeList" value="{{ store.id }}"> 

は、関連するコントローラの詳細です:

submitFabricReservation() { 
    let base = this; 
    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 

    let url = `http://laravel.localhost/fabrics/reservation`; 
    let data = { 
     cloth: this.cloth, 
     garment_type: this.garmentType, 
     consumer_name: this.consumerName, 
     store_number: this.storeNumber 
    }; 

    return this.http.post(url, JSON.stringify(data), { headers: headers }) 
     .toPromise() 
     .then(function(data) { 
      base.messageService.unshift(data.json()); 
      base.modal.dismiss(); 
     }); 
} 

それは正常に動作します。テキストボックスは、正しいIDを値として持つべきときに表示されます。 BUTコントローラ機能では、this.storeNumberは未定義です。テキストボックスの値を手動で編集すると、コントローラは値を受け取り、this.storeNumberは入力ボックスに入力した値に設定されます。変更イベントが発生したときにのみモデルが更新されるか、その角度がまだ原始的であるときには無視されるようなと思われます。

私は問題の周りにいくつかの方法を見ることができますが、私はそれらのすべてを行う方法がわかりません。物事を行うための適切な角度のある方法(もしあれば)を知ることもできません。私は次のことができます。

入力に発射するHTTPコールバックでthis.storeNumber(私はこれを行う方法を知っている)
  • 強制変更イベントを設定し
    1. (どこで、いつ、私はこれを行うのでしょうか?)
    2. 要素(#storeNumber)にIDを設定して強制的に値を取得する

    これらのどれかが正しいかどうかわかりません。これは、しばしば十分に出てくるようなものです。私は何かを見逃しているに違いない。何かご意見は?

  • 答えて

    1

    最初のオプションは正しいオプションです。これがバインディングです。真実の単一点はモデルです。ビューは、モデルを表示するだけで、モデルを変更することができます。したがって、テキストフィールドに特定の値を設定する場合は、ビューに設定しないでください。モデルで設定し、入力がモデルにバインドされているので、その値が表示されます。

    ストアリストに複数の要素がある場合は、選択したstoreNumberを持つオプションで選択した属性を設定または削除する方法を自分自身で尋ねるでしょう。さて、selectはstoreNumberにバインドされているので、必要はありません。したがって、モデルにstoreNumberを設定するだけで、対応するオプションが選択されます。