Aurelia : Bindable 속성이 "너무 늦게 설정되었습니다."

Question

내 사용자 정의 요소에는 외부에서 설정되는 바인딩 가능 속성 "메뉴"가 있습니다. 내 문제는 메뉴 속성이 설정되기 전에 메뉴에 의존하는 "요리"속성이 쿼리된다는 것입니다. 따라서 메뉴가 정의되지 않고 요리가 검색되지 않습니다. 여기서 무엇을 할 수 있습니까?

메뉴 control.ts :

import { bindable } from 'aurelia-framework'; 

import { Menu } from '../../../app/model/menu'; 
import { Dish } from '../../../app/model/dish'; 

export class MenuControl { 

    @bindable menu: Menu; 

    get dish1() { 
     return this.getDish(1); 
    } 

    get dish2() { 
     return this.getDish(2); 
    } 

    get dish3() { 
     return this.getDish(3); 
    } 

    getDish(dishNo: number) { 
     return this.menu.dishes.find(x => x.dishNo == dishNo); 
    } 
} 

메뉴 control.html :

<require from="../dish-control/dish-control"></require> 

<div class="tab-content" style="margin-top: 20px; width: 800px;"> 
    <div class="tab-pane fade in active"> 
     <div class="row"> 
      <div class="col-md-8"> 
      </div> 
      <div class="col-md-2" style="padding-left: 0;"> 
      </div> 
      <div class="col-md-2" style="padding-left: 0;"> 
       <label>Vegetarisch</label> 
      </div> 
     </div> 
     <h4>Men&uuml; 1</h4><dish-control dish.bind="dish1"></dish-control> 
     <h4>Men&uuml; 2</h4><dish-control dish.bind="dish2"></dish-control> 
     <h4>Men&uuml; 3</h4><dish-control dish.bind="dish3"></dish-control> 
    </div> 
</div> 

Answer 1

당신은,321을 넣을 수 있어야한다 부모 구성 요소 중 하나에있는 0은 <dish-control> 또는 심지어 <dish-control> 자체입니다. 이 방법으로 <dish-control>은 DOM에 연결되지 않고 this.menu.dishes이 존재할 때까지 초기화됩니다.