Question

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

我已经尝试直接在html文件中添加一个固定数字，并且该数字有效（请参见下面的代码）。但是，当要使用应该由输入更新的打字稿中的变量“偏移”（类型：数字）时，返回类型将变得不确定，并且会出现错误。我还尝试在我的打字稿文件中使用一种方法，而不是在html文件中进行添加，然后返回新索引，但它不起作用并显示错误。我还尝试使用{{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对我的点击做出反应，并显示文字。

但是，即使使用父组件中的输入将偏移量设置为3（如上面的html），此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>

出现错误。

偏移量（type：number）以此方式在我的打字稿文件中定义，并且由父组件更改，并且可以使用console.log(offset)由子组件轻松显示：

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

我希望输出是显示数据json文章的文本，但是当我使用类似data[(i+offset)]的输入来更改偏移量时，结果是错误的，也许无法通过另一个变量是固定数字？

谢谢您的支持，这是我关于stackoverflow的第一篇文章，我希望我做得很好！：）

Answer 1

如果要创建分页组件，则不应仅依赖HTML和某些绑定。

您的组件应该具有“高级”逻辑，从某种意义上说，它应该能够知道何时到达集合的结束/开始（除其他事项外）。

基本上，如下：

获取完整的收藏（比如说100件）
按页码将其拼接到您的商品中（假设为10，因此结果范围为0-10）
测试项目是否在范围之前
测试项目是否在范围之后
基于这些变量允许/阻止页面更改。

这给你留下了

该集合的1个变量
该集合子集的1个变量（或1个管道）
每个页码1个变量
1个用于补偿的变量
2个布尔值以禁用分页按钮。

尝试使用此方法，如果仍然有问题，请向您提供尝试的方法！

Answer 2

您正在访问索引。

对于您的data[(i+offset)]数组中最后undefined个元素，

offset将是data，因此您基本上是在尝试做undefined.id错误。您应该更改方法签名，以仅将索引作为参数，并在component.ts文件中处理这种情况

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

2 个答案: