如何在 *ngFor angular 指令中为索引添加偏移量？

Question

我想显示来自 json 的一些数据，但我不能简单地向索引添加一个偏移量并显示某个偏移量的所有数据，而是得到 ERROR TypeError: Cannot read property 'id' of undefined并且 div 中的文本没有出现。

我已经尝试过在html文件中直接添加一个固定的数字并且它有效（见下面的代码）。但是当涉及到使用打字稿中的变量 "offset" (type:number) 应该用输入更新时，return 类型变得不确定并且出现错误。我还尝试在我的打字稿文件中使用一种方法，而不是在 html 文件和 return 新索引中进行添加，但它不起作用并显示错误。我还尝试使用 {{addition(i,offset)}} 调用该方法并将结果放入我用作索引的变量中，但它仍然显示错误。

例如，这个 html 文件工作正常：

<ng-container *ngFor="let article of data; let i = index">
    <ng-container *ngIf="i<(nbElements)">
        <div (click)="checkArticle(data[(i+3)].id)">
            <p class="text-center"> {{data[(i+3)][dataKey]}}</p>
        </div>
    </ng-container>
</ng-container>

div 对我的点击做出反应并出现文本。

但是，此 html 文件不起作用，即使使用父组件中的输入将偏移量设置为 3（如上面的 html）：

<ng-container *ngFor="let article of data; let i = index">
    <ng-container *ngIf="i<(nbElements)">
        <div (click)="checkArticle(data[(i+offset)].id)">
            <p class="text-center"> {{data[(i+offset)][dataKey]}}</p>
        </div>
    </ng-container>
</ng-container>

出现错误。

偏移量（类型：数字）在我的打字稿文件中以这种方式定义，并由父组件更改，并且可以使用 console.log(offset):

轻松地由子组件显示

export class AppColumnComponent implements OnInit {
  @Input() offset : number ;

我希望输出是显示我的数据文章的文本 json，但是当我使用这样的输入更改偏移量时 data[(i+offset)] 结果是错误的，也许无法使用其他索引使用固定数字的其他变量？

感谢您的支持，这是我在 Whosebug 上的第一个 post 希望我做得好！ :)

Answer 1

如果你想做一个分页组件，你不应该仅仅依赖你的 HTML 和一些绑定。

你的组件应该有一个 "advanced" 逻辑，在某种意义上它应该能够知道它何时到达 collection 的 end/start（以及其他事情）。

基本上，情况如下：

获取完整的 collection（假设 100 项）
按页码将其拼接到您的项目（假设为 10，因此结果范围为 0-10）
测试范围之前是否存在项目
测试范围后是否存在项目
Allow/block 页面根据这些变量进行更改。

这给你留下了

1 个变量用于 collection
collection
每页项目数的 1 个变量
1 个偏移变量
2 个布尔值来禁用分页按钮。

尝试使用它，如果您仍然有问题，请提供您尝试过的堆栈闪电战！

Answer 2

您正在越界访问索引。

data[(i+offset)] 将是 undefined 你的 data 数组中最后 offset 数量的元素所以你基本上是在尝试做 undefined.id 这导致你的错误。您应该更改您的方法签名以仅接收索引作为参数并在您的 component.ts 文件

中处理该情况

如何在 *ngFor angular 指令中为索引添加偏移量？

How to add an offset to an index in a *ngFor angular directive?

html

angular

typescript

ngfor