角2 - テンプレートループの呼び出しクラスメソッド* ngFor

Question

コンポーネントクラスが少し大きくなっているangular2アプリケーションがあります。 「Handler」クラスを含むフォルダを作成することに決めました。そのため、関連するコードを各ハンドルクラスに入れることができました。私のコンポーネントクラスでは、私はその後、各ハンドラのインスタンスを作成して、テンプレートにこれらを使用

マイコンポーネント：

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ループの外にあるため動作します。

私はあなたのループ変数がTabHandlerと同じ名前を持つクラスで空の関数を作成し、loppでそれを呼び出そうとしましたが、それはまた、同じエラーメッセージで失敗し

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

Answer 1

ていますあなたのクラス。ループ変数がループ内のクラスメンバーをオーバーライドするため、その上でselectメソッドを実行できません。

のみtabはとにかく誤解されているので、私はTabHandlerの名前を変更することをお勧めしたい：

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> 

Answer 2

は 'サービス' クラス

のために良い候補であるように思わ