私のAngularアプリケーションのこの式は、評価された式の結果ではなくリテラルテキストを表示するのはなぜですか？

Question

私は、この評価された結果とは対照的に、なぜ私のAngularアプリケーションのセクションが - 文字通り - 'zipcodeFilters.text'を表示しているのか理解しようとしています。

は

私はここで使用している、関連するビューのコードは次のようになります。あなたはそれを見ることができます上記のセクションから

<filter-option name="Zipcode" 
     placeholder="Enter ZIP Code" 
     [usePlaceholder]="!zipcodeFilters.text" 
     [visible]="zipcodeFilters.enabled"> 
    <filter-label>{{zipcodeFilters.text}}</filter-label> 
    <filter-menu> 
     <div class="visit-type-filter-options"> 
      <md-input-container [dividerColor]="color"> 
       <input mdInput placeholder="ZIP Code" 
         value="zipcodeFilters.text" 
         [(ngModel)]="zipcodeFilters.text" 
         (keyup.enter)="filterByZip(zipcodeFilters.text)"> 
      </md-input-container> 
      <button md-button class="reset-button" (click)="filterByZip(zipcodeFilters.text)">Filter</button> 
      <button md-button class="reset-button" (click)="unfilterZipResults()">Reset</button> 
     </div> 
    </filter-menu> 
</filter-option> 

：

placeholder="Enter ZIP Code" 
    [usePlaceholder]="!zipcodeFilters.text" 

...あれば、言って使用されています'zipcodeFilters.text'の結果がない（つまり、ユーザは何も入力していません）、 "Enter ZIP Code"というプレースホルダを使用します。

しかし、コンポーネントビューを最初に読み込むと、「郵便番号を入力してください」と表示されません。文字通り「zipcodeFilters.text」と表示されます。

フィルタを削除した場合、フィルタはプレースホルダテキストを期待どおりに表示します。しかし、ページをリフレッシュすると、プレースホルダテキストではなく、「zipcodeFilters.text」が表示されます。

このような対応するコンポーネントの外観のこの関連部分：

この表示リテラルテキストではなく、ここで評価された式作って何

zipcodeFilters = { 
    enabled: true, 
    options: [ 

    ], 
    text: null 
}; 

public filterByZip(zip) { 
    const arr: any = []; 
    if (zip) { 
     arr.push(zip); 
    } 
    const zipCall = this.zip = arr.length === 0 ? undefined : arr.toString().split(', '); 
    const zipArr = Array.from(zipCall); 
    this.sendZipcode.emit(zipArr); 
} 

unfilterZipResults() { 
    this.sendZipcode.emit(); 
    const arr = []; 
    this.zipcodeFilters.text = ''; 
} 

？

Answer 1

value = "zipcodeFilters.text"この部分を削除してください。