Angular 5：错误类型错误：无法读取未定义的属性“偏移量”

Posted 2023-03-13

【中文标题】Angular 5：错误类型错误：无法读取未定义的属性“偏移量”

【英文标题】：Angular 5: ERROR TypeError: Cannot read property 'offset' of undefined

【发布时间】：2018-09-17 16:38:29

【问题描述】：

错误： ERROR TypeError: Cannot read property 'offset' of undefined

我有漫画组件，工作正常，但我决定制作一个子组件，现在它不工作了。 我有一个父组件“漫画”和一个子组件“分页”。漫画显示正常，但分页不工作。

在代码中，console.log(this.pagination); 返回一个类似 ('offset': 20, 'count':1) 的数组

但是 pagination.component.html ir 返回错误 Cannot read property 'offset' of undefined 所以分页是空的，没有数据。所以父漫画.component.ts 不会与子共享这个变量。

我尝试在 pagination.component.ts 中声明 pagination: Pagination;，但 pagination 仍然是空的。

所以我认为我以错误的方式声明了某些内容，或者我应该声明一些我没有声明的内容。我进行了搜索，并试图找到丢失的内容，但没有找到任何内容，并且仍然无法正常工作。

我的代码：

// file: pagination.ts

export class Pagination 
  offset: number;
  count: number;




// file: /comics/comics.component.ts

import  Component, OnInit  from '@angular/core';
import  ActivatedRoute, Params  from '@angular/router';

import  Comic  from '../comic';
import  Pagination  from '../pagination';
import  ComicService  from '../comic.service';

@Component(
  selector: 'app-comics',
  templateUrl: './comics.component.html',
  styleUrls: ['./comics.component.css']
)
export class ComicsComponent implements OnInit 

  comics: Comic;
  pagination: Pagination;

  constructor(
    private route: ActivatedRoute,
    private comicService: ComicService
  ) 

  ngOnInit() 
  

  getComics(): void 
    const offset = +this.route.snapshot.paramMap.get('offset');
    this.comicService.getComics(offset, 20)
    .subscribe(
      result => 
        this.comics = result['data']['results'];
        console.log(this.comics);

        this.pagination.offset = result['data']['offset'];
        this.pagination.count = result['data']['count'];

        console.log(this.pagination);
  
);
  



// file: /pagination/pagination.component.ts

import  Component, OnInit  from '@angular/core';
import  ActivatedRoute, Params  from '@angular/router';

import  Pagination  from '../pagination';

@Component(
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
)
export class PaginationComponent implements OnInit 

  constructor()  

  ngOnInit() 
  




// file: comics/comics.component.html

<div *ngFor="let comic of comics">
  <h5>comic.title | uppercase </h5>
</div>

<app-pagination></app-pagination>



// file: pagination/pagination.component.html

<div>
  <h5>pagination.offset</h5>
  <span>pagination.count</span>
</div>

使用的版本：

Angular CLI：1.7.3

节点：8.9.4

操作系统：darwin x64

角度：5.2.8

【参考方案1】：

鉴于这两个组件处于父子关系，您最好的选择是简单地将offset 和count 定义为子组件的输入属性，并从父组件传递它们，如下所示：

comics.component.ts

import  Component, OnInit  from '@angular/core';
import  ActivatedRoute, Params  from '@angular/router';

import  Comic  from '../comic';
import  Pagination  from '../pagination';
import  ComicService  from '../comic.service';

@Component(
  selector: 'app-comics',
  templateUrl: './comics.component.html',
  styleUrls: ['./comics.component.css']
)
export class ComicsComponent implements OnInit 

  comics: Comic;
  offset;
  count;

  constructor(
    private route: ActivatedRoute,
    private comicService: ComicService
  ) 

  ngOnInit() 
  

  getComics(): void 
    const offset = +this.route.snapshot.paramMap.get('offset');
    this.comicService.getComics(offset, 20)
    .subscribe(
      result => 
        this.comics = result['data']['results'];
        console.log(this.comics);

        this.offset = result['data']['offset'];
        this.count = result['data']['count'];
  
);
  

pagination.component.ts

import  Component, OnInit, Input  from '@angular/core';
import  ActivatedRoute, Params  from '@angular/router';

import  Pagination  from '../pagination';

@Component(
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
)
export class PaginationComponent implements OnInit 
  @Input() offset;
  @Input() count;
  constructor()  

  ngOnInit() 
  

comics.component.html

<div *ngFor="let comic of comics">
  <h5>comic.title | uppercase </h5>
</div>

<app-pagination [offset]="offset" [count]="count"></app-pagination>

pagination.component.html

<div>
  <h5>offset</h5>
  <span>count</span>
</div>

【讨论】：

谢谢，这个解决方案有效，所以我会接受它作为好的解决方案，但这不是错误。由于某种原因，我无法为父组件中的分页对象设置信息。我用与父级中的分页对象具有相同架构的数组解决了它，并将其传递给子级，子级具有分页对象并从父数组继承它。您的解决方案很好，但是在分页对象中我有很多信息（我简化它只是为了询问）并且我更喜欢传递一个对象而不是传递 10 个字符串变量。虽然你的信息对我帮助很大。