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

Question

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

我已经尝试在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 对我的点击做出反应并显示文本。

然而，这个 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)] 之类的输入更改偏移量时，结果是一个错误，也许不可能使用其他变量来使用其他索引那是一个固定的数字？

感谢您的支持，这是我在 stackoverflow 上的第一篇文章，希望我做得很好！ :)

Answer 1

您正在访问超出范围的索引。

data[(i+offset)] 将是 undefined 用于您的 offset 数组中的最后一个元素数量 data 因此您基本上是在尝试执行 undefined.id 这会导致您的错误。 您应该将方法签名更改为仅将索引作为参数接收并在您的 component.ts 文件中处理这种情况

Answer 2

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

您的组件应该具有“高级”逻辑，因为它应该能够知道它何时到达集合的结束/开始（除其他外）。

基本上是这样的：

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

这让你有

• 集合的 1 个变量
• 集合子集的 1 个变量（或 1 个管道）
• 每个页码的项目 1 个变量
• 1 个偏移变量
• 2 个布尔值来禁用分页按钮。

尝试解决这个问题，如果您仍然有问题，请提供您尝试过的内容！