如何从模板绑定中的角度4访问getter/setter访问器？

Question

可以说我有以下的getter/setter方法

get next() { 
 
    console.log(this.people[this._index], this._index); 
 
    return this.people[this._index]; 
 
} 
 

 
set next(i: any) { 
 
    this._index = (+i) + 1; 
 
    this._index = (+i) % this.people.length; 
 
}

，我想通过以下方式来调用这个：

<ng-template ngFor let-person="$implicit" [ngForOf]="people" let-i=index let-last=last> 
 
    <app-card [cardItem]="people[i]" [nextCard]="next(i)"></app-card> 
 
</ng-template>

PS ：把它想象成圆形阵列。在哪里我需要prev，当前和下一个项目。

不过，我得到以下错误

角：会员 '下一步'，在不赎回

这是为什么？什么是解决方案？

感谢

编辑

谢谢你们的帮助和解释。有了您的帮助，我设法使其工作：

<app-card [currentCard]="people[i]" [nextCard]="people[i === people.length - 1 ? 0: i + 1]" [prevCard]="i == 0 ? people[people.length - 1] : people[i - 1]"></app-card>

因此，它非常圆阵。 让我们假设我们有以下几点：

people["James Dan", "Aluan Haddad", "Jota Toledo"]

这么几个条件：

1. 如果我站在阵列（即index = 0）的开头 - 那么我prev将people[people.length - 1]这是数组中的最后一个元素。如果我现在是在索引1，那么我的分组将是指数0，接下来的将是指数2

Answer 1

的角模板语法，一般来说，JavaScript语法的一些显着的差异，并与众多的子集限制。

但是，您在这里实际上在JavaScript中也是无效的。调用属性访问器是无效的。永远。

给出下列财产

get p() { 
    console.info('read p'); 
    return this.wrapped; 
} 
set p(value) { 
    console.info('wrote p'); 
    this.wrapped = value; 
} 

时正是如此名字被读出的属性的get访问被隐式调用。

例如：

console.log(o.p); // read p 

属性名称正是如此写入时的set访问被隐式调用。

例如：

o.p = x; // wrote p; 

同样的规则适用于角模板。

然而，你的

<app-card [cardItem]="people[i]" [nextCard]="next(i)"> 

例子表明，一个属性是不是你想要的这里。

属性的正确使用意味着以下语法

<app-card [cardItem]="people[i]" [nextCard]="next = i"> 

，我不认为这是由角模板语法即使它是不会使一个很大的意义，并就很难支持读书。

相反，你应该创建一个返回然后在你的模板作为

<app-card [cardItem]="people[i]" [nextCard]="getNext(i)"> 

值

getNext(i: number) { 
    this._index = i + 1; 
    this._index = i % this.people.length; 
    return this.people[this._index]; 
} 

话虽如此，我认为整个设计是有问题的方法。你似乎正在通过扭曲来存储多余的可变状态，而不依赖于自然维护它的数组。

我相信你会好得多通过完全去除的方法和属性，并使用

<app-card 
    *ngFor="let person of people; let i = index" 
    [previousCard]="people[i === 0 ? people.length - 1 : i - 1]" 
    [cardItem]="person" 
    [nextCard]="people[i === people.length - 1 ? 0 : i + 1]"> 

如果你想有一个更清晰的语法，您可以定义一个属性，用get访问服务的唯一，那回报将您的阵列视为具有previous,current和next属性的对象。

get peopleAsPreviousCurrentAndNextTriplets() { 
    return this.people.map((person, i) => ({ 
    previous: this.people[i === 0 ? this.people.length - 1 : i - 1], 
    current: person, 
    next: this.people[i === this.people.length - 1 ? 0 : i + 1] 
    })); 
} 

这可以在复杂的代码中更具可读性，因为它为我们可以直接使用的更多语义属性提取索引。也许更重要的是，它使TypeScript的世界级工具能够验证计算。

<app-card 
    *ngFor="let item of peopleAsPreviousCurrentAndNextTriplets" 
    [previousCard]="item.previous" 
    [cardItem]="item.current" 
    [nextCard]="item.next"> 

因此我们来了整整一圈。请注意我们如何定义get访问器，以及我们如何读取它定义的属性，而不使用()，隐式调用该访问器。

的最后一个例子可能是矫枉过正对于这种情况，但我认为这是非常有用的没有少