Question

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

我有漫画组件，工作正常，但我决定制作一个儿童组件，现在它不起作用。我有一个父组件'漫画'和一个子组件'分页'。漫画显示得很好，但分页不起作用。

在代码中，console.log(this.pagination);返回一个数组（'offset'：20，'count'：1）

但是pagination.component.html会返回错误Cannot read property 'offset' of undefined，因此分页为空，没有数据。所以parent comics.component.ts不与child共享此变量。

我试图在pagination.component.ts中声明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

OS：darwin x64

Angular：5.2.8

Answer 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>

Angular 5：ERROR TypeError：无法读取未定义

1 个答案: