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

Question

我有一个 angular2 应用程序，其中组件类变得有点大。 我决定创建一个包含“处理程序”类的文件夹，这样我就可以将相关代码放在每个句柄类中。然后在我的组件类中创建每个处理程序的实例并在模板中使用它们

我的组件：

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 中调用它，但同样失败并显示相同的错误消息

原始异常：TypeError: self.context.$implicit.select is not a 功能

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>