Angular 2 - 調用模板循環中的類方法* ngFor

我有一個angular2應用程序，其中組件類變得有點大。我決定用'Handler'類創建一個文件夾，所以我可以把相關的代碼放在每個句柄類中。在我的組件類然後我創建的每個處理程序的實例，並在模板中使用這些Angular 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

Angular 2 - 調用模板循環中的類方法* ngFor

回答

相關問題