角度2つのデータ破損

Question

私は複数行で構成され、小さなコンポーネントを書いていると結合し、各ラインの構成は次のとおりです。

1. 2個の可能な選択肢を持つドロップダウン - という名前を付け、「タイプ」
2. 入力ボックス - 名
   ： - それは「キー」
3. 入力ボックスには、「タイプ」（最初のドロップダウンからの値）に応じ/プルダウンは

予想される動作が「値」という名前を付け

1. 最初のドロップダウンから「Constant」を選択すると、3番目の要素は入力ボックスになります。それが "変数"ならば、ドロップダウンになるはずです。
2. ユーザーが「キー」と「値」の両方のフィールドを入力すると、別のエントリの新しい行が表示されます。このような振る舞いは、「キー」または「値」が変化するたびに発生します。
3. ユーザーが最後の行ではなく「キー」または「値」を削除した場合は、その行を削除する必要があります。これは、「キー」または「値」がフォーカスを失った場合にのみ発生します。予想通り、それは本当に働いていないけど sample on plunker

   @Component({ 
       selector: 'my-app', 
       template: ` 
   <div *ngFor="let rec of records"> 
       <select style="width: 75px;" class="select-field" [(ngModel)]="rec.type" (ngModelChange)="onTypeChange(rec)"> 
       <option *ngFor="let type of rec.types">{{type}}</option> 
       </select> 
   
       <input type="text" class="input-fields" [(ngModel)]="rec.key" (ngModelChange)="onValueChange(rec)" (blur)="onFocusLost(rec)"/> 
   
       <input *ngIf="rec.type == 'Constant'" type="text" class="input-fields" [(ngModel)]="rec.value" (ngModelChange)="onValueChange(rec)" (blur)="onFocusLost(rec)"/> 
       <span *ngIf="rec.type == 'Variable'"> 
        <select style="width: 75px;margin-left: 10px;" class="select-field" [(ngModel)]="rec.value" (ngModelChange)="onValueChange(rec)" (blur)="onFocusLost(rec)"> 
        <option></option> 
        <option *ngFor="let field of fields">{{field}}</option> 
        </select> 
       </span> 
   </div> 
       `, 
   }) 
   
   export class App { 
   records: FieldSelectionRecord[] = [new FieldSelectionRecord()]; 
   fields: string[] = ['foo1', 'foo2']; 
   
       onTypeChange(record: FieldSelectionRecord) { 
       record.value = ""; 
       } 
   
       onValueChange(changedRecord: FieldSelectionRecord) { 
       if (this.isLastElement(changedRecord) && this.isRecordFullyFilled(changedRecord)) { 
        this.records.push(new FieldSelectionRecord()); 
       } 
       } 
   
   
   
       onFocusLost(changedRecord: FieldSelectionRecord) { 
       if (!this.isLastElement(changedRecord) && !this.isRecordFullyFilled(changedRecord)) { 
        this.records = this.records.filter(record => record != changedRecord); 
       } 
       } 
   
       private isLastElement(record: FieldSelectionRecord): boolean { 
       let index = this.records.indexOf(record); 
       return this.records.length - 1 === index; 
       } 
   
       private isRecordFullyFilled(record: FieldSelectionRecord): boolean { 
       return record.value.length > 0 && record.key.length > 0; 
       } 
   
   } 
   

   ：

私はこのようなものを作成しました。たとえば、キーと値の両方を入力すると、新しい行が表示されます。前の行をクリックし、変数の型を変数に変更すると、「値」がドロップダウンに変更されません。また、前の行を削除しても、常にどちらかが機能しません。私はそれをデバッグしていたし、基になる値が変更されていると考えていますが、ビューは更新されません。

驚くべきことは、「キー」 - 「タイプ」と「値」のみを使用せずにまったく同じ別のコンポーネントがあり、完全に機能しているということです。 Working sample here

唯一の違いは、このラインの欠落しています。

<input type="text" class="input-fields" [(ngModel)]="rec.key" (ngModelChange)="onValueChange(rec)" (blur)="onFocusLost(rec)"/> 

とisRecordFullyFilled方法。

私は双方向バインディングを使用しないようにしましたが、どちらも助けにはなりませんでした。私はここで間違って何をしていますか？

Answer 1

ブラウザのコンソールを見れば、あなたはエラーに気づくことができます。

VM3717 core.umd.js:3066 ORIGINAL EXCEPTION: Cannot read property 'length' of undefined

だから、私のだから、愚かなlength

private isRecordFullyFilled(record: FieldSelectionRecord): boolean { 
    return record.value && record.value.length > 0 && record.key.length > 0; 
} 

https://plnkr.co/edit/MbmX6G5ufr5HNGWzyMZv?p=preview