2017-01-31 2 views
0

ngFor에서 ID를 전달하고 ID를 사용하여 드롭 다운을 채울 수있는 메소드를 호출 할 수 있습니까?각도 2는 ngFor 내에서 메소드 호출

구문 분석 오류가 발생했습니다. enter image description here

그래서 내가 이달의 드롭 다운에 대한 모든 값을 얻을 수 dropwdownid 통과해야

<div class="container" style="width:100%; border:1px double"> 
    <div class="row left" *ngFor='let controls of tabControls'> 
     <div class="col-md-3 text-left" style="border:1px dotted"> 
      {{controls.DropDownTitle}} 
     </div> 
     <div class="col-md-9 text-left"> 
       <select [(ngModel)]="populateValues(controls.DrodownID)"> 
       //I will do this after populateValues which wil return an array of items 
        <option *ngFor="let item of items" [value]="item.id"> 
       {{ item.name }} 
       </option> 
       </select> 
     </div> 
    </div> 
    </div> 

출력 (내가 ngModel 갈 방법이 아니다 알아,하지만 난 그냥 예를 보여주고 싶었다).

+0

'[(ngModel)] = "populateValues ​​(controls.DrodownID)"는 유효하지 않습니다. 메소드에 양방향 바인딩을 사용할 수 없습니다. 또한 컨트롤에 바인딩하는 것도 의미가 없습니다. 작동하지 않는 템플릿 기반 및 반응 형 양식의 이상한 혼합입니다. https://angular.io/docs/ts/latest/guide/forms.html, https://angular.io/docs/ts/latest/cookbook/dynamic-form.html –

+0

동적 양식이 아닙니다. 예를 들어 레이블이있는 드롭 다운의 동적 번호를 가져 오는 것입니다. Month : Drodown. 그런 다음 드롭 다운 ID를 메서드에 전달하여 드롭 다운 값을 반환합니다. – rgoal

+0

@rgoal 방금 게시 한 답변을 살펴보십시오. http://stackoverflow.com/a/41987524/6294072 – Alex

답변

1

"내 드롭 다운을 채우는 방법 호출"이 무슨 뜻인지 확실하지 않습니다.

은 다음과 같이해야합니다 : 이것은 가정입니다

<select> 
    <option *ngFor="let item of items" [value]="item.id"> 
    {{ item.name }} 
    </option> 
</select> 

당신이 {id, name} 객체의 배열을 들고 items 속성이 있습니다.

당신은, 당신은 템플릿에서 직접 아이템을 취득하는 메소드를 호출 할 수 있어야하는 경우 :

<option *ngFor="let item of getItems()" [value]="item.id"> 

그러나 구성 요소의 클래스에서 메서드를 호출하고 속성에 결과를 저장하는 것이 좋습니다 :

export class MyComponent { 
    items: any; 
    ngOnInit() { 
    this.items = getItems(); 
    } 
} 
+0

답변 뒤에 이유를 적어 두는 것 : 배열 속성을 사용하여 변경 검사가 수행되는 방식으로 인해 (최근에 동작이 변경되지 않는 한) rerenders가 훨씬 적습니다. 매번 함수를 평가하고 성능에 미치는 영향은 훨씬 적습니다. – silentsod

+0

@silentsod : 정보를 주셔서 감사합니다. 실제로 getItems() 함수가 템플릿에서 직접 사용될 때 여러 번 재평가되고 있는지 궁금합니다. – AngularChef

+0

위의 코드를 업데이트 했으므로 값을 반환 할 메서드에 값을 전달한 다음 ngfor를 수행해야합니다.

관련 문제