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循环之外。

我试图在类中创建一个空函数，并在lopp中调用它，但是也失败并出现相同的错误消息

ORIGINAL EXCEPTION：TypeError：self.context。$ implicit.select不是功能

Answer 1

您的循环变量与您班级中的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>

Angular 2 - 在模板循环中调用类方法* ngFor

1 个答案: