각도 2 - 템플릿 루프의 클래스 메서드 호출 * ngFor

저는 컴포넌트 클래스가 약간 커지는 각도 2 앱을 사용합니다. '핸들러'클래스가있는 폴더를 만들기로 결정 했으므로 각 핸들 클래스에 관련 코드를 넣을 수 있습니다. 내 구성 요소 클래스에서 나는 각 핸들러의 인스턴스를 생성하고 템플릿에이를 사용각도 2 - 템플릿 루프의 클래스 메서드 호출 * ngFor

내 구성 요소 :

export class DesignerComponent { 
public tab: TabHandler = new TabHandler(this);

내 처리기 :

export class TabHandler { 

public designerComponent: DesignerComponent; 

constructor(designerComponent: DesignerComponent) 
{ 
    this.designerComponent = designerComponent 
} 

add() { 
    if (this.designerComponent.formModel.tabs.length < 1) { 
     this.designerComponent.formModel.tabs.push(new TabModel("Tab")); 
    } 
    this.designerComponent.formModel.tabs.push(new TabModel("Tab")); 
}

내 템플릿 :

    <li *ngFor="let tab of formModel.tabs; let i = index; "> 
        <a href="#" [ngClass]="{'tab-selected': formModel.currentTab == tab}" 
         class="tab-button" 
         attr.contenteditable="{{formModel.currentTab == tab}}" 
         (blur)="tab.changeShortTitle($event)" 
         (dragover)="allowDrop($event,'tab')" 
         (dragstart)="drag($event,i,'tab')" 
         (drop)="drop($event,i)" 
         (dragleave)="dragleave()" 
         (click)="tab.select(tab)"> 
         {{tab.shortTitle}} 
        </a> 
       </li> 
       <li id="add-tab-buttonholder"> 
        <a href="#" (click)="tab.add()"><i class="fa fa-plus" aria-hidden="true"></i></a> 
       </li>

마지막 <li id="add-tab-buttonholder"> <a href="#" (click)="tab.add()

은 * ngFor 루프 외부에 있기 때문에 작동합니다.

나는 수업 시간에 빈 함수를 작성하고, lopp에 전화를 시도했다, 그러나 그것은 또한

ORIGINAL EXCEPTION: TypeError: self.context.$implicit.select is not a function

출처

2016-07-14 Borgen Data Bjørn Kristiansen

템플릿을 변경해야합니다.'add()'를 호출하는 대신'tab.add()'를 호출해야합니다. 템플릿을 보지 않고도 대답하기가 어렵습니다. – PierreDuc

나는 tab.add()를 사용합니다. –

귀하의 루프 변수가 TabHandler에 같은 이름을 가진 같은 오류 메시지와 함께 실패 너의 수업. 루프 변수가 루프 내부의 클래스 멤버보다 우선합니다. 따라서이 클래스에 select 메소드를 실행할 수 없습니다.

나는 이름을 변경 제안하려는 TabHandler 만 tab 어쨌든 오해의 소지가 있기 때문에 :

export class DesignerComponent { 
    public tabHandler: TabHandler = new TabHandler(this);

그리고 당신의 템플릿 :

<li *ngFor="let tab of formModel.tabs; let i = index; "> 
    <a href="#" [ngClass]="{'tab-selected': formModel.currentTab == tab}" 
     class="tab-button" 
     attr.contenteditable="{{formModel.currentTab == tab}}" 
     (blur)="tab.changeShortTitle($event)" 
     (dragover)="allowDrop($event,'tab')" 
     (dragstart)="drag($event,i,'tab')" 
     (drop)="drop($event,i)" 
     (dragleave)="dragleave()" 
     (click)="tabHandler.select(tab)"> 
      {{tab.shortTitle}} 
    </a> 
</li> 
<li id="add-tab-buttonholder"> 
    <a href="#" (click)="tabHandler.add()"><i class="fa fa-plus" aria-hidden="true"></i></a> 
</li>

출처

2016-07-14 08:56:33 rinukkusu

감사합니다! 이 오류가 발견되지 않으면 브레이크가 필요하다고 생각하십시오 :) –

는 '서비스'클래스

을위한 좋은 후보가 될 것 같습니다

출처

2017-08-20 13:14:29

각도 2 - 템플릿 루프의 클래스 메서드 호출 * ngFor

답변

관련 문제