Angular*ng为每个元素显示更多/显示更少按钮

Question

我正试图找到一个解决方案，为使用*ngFor构建的列表中的每个元素添加一个show more/show less按钮。我对一个元素没有问题，因为在这种情况下，我可以创建一些布尔变量并在单击时显示/隐藏文本，但如何处理多个元素？

我使用了一个自定义管道来截断元素内部的文本，但也许还有其他更好的方法。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'ellipsis'
})
export class EllipsisPipe implements PipeTransform {
transform(val, args) {
if (args === undefined) {
return val;
}
if (val.length > args) {
return val.substring(0, args) + '...';
} else {
return val;
}
}
}

Answer 1

正如您所描述的，您可以为一个元素使用布尔值。这意味着，如果数组中的每个项都有布尔值，就可以解决问题。

您可以使用布尔值扩展项目持有者对象，该布尔值可以保存有关显示/隐藏按钮的信息。

interface Holder<T> {
T value;
bool showHide;
}
let array: Holder<string>[] = [];