Angular 5: ERROR TypeError: невозможно прочитать свойство «смещение» неопределенного

avatar
Alex
8 апреля 2018 в 00:37
2624
1
0

Ошибка: ОШИБКА TypeError: Не удается прочитать свойство 'offset' of undefined

У меня был комический компонент, он работал нормально, но я решил сделать дочерний компонент, и теперь он не работает. У меня есть родительский компонент «комиксы» и дочерний компонент «разбивка на страницы». Комиксы отображаются нормально, но не работает нумерация страниц.

В коде console.log(this.pagination); возвращает массив вида ('смещение': 20, 'количество':1)

Но страница pagination.component.html возвращает ошибку Cannot read property 'offset' of undefined, поэтому страница пуста и не содержит данных. Таким образом, родительский файл comics.component.ts не передает эту переменную дочернему элементу.

Я попытался объявить pagination: Pagination; в pagination.component.ts, но нумерация страниц по-прежнему пуста.

Итак, я думаю, что объявляю что-то в неправильном режиме, или я должен объявить что-то, чего я не декларирую. Я искал и пытался найти то, чего не хватает, но ничего не нашел, и это все еще не работает.

мой код:

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

Используемые версии:

Угловой интерфейс командной строки: 1.7.3

Узел: 8.9.4

ОС: darwin x64

Угловой: 5.2.8

Источник

Ответы (1)

avatar
bugs
8 апреля 2018 в 09:58
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>
Alex
15 апреля 2018 в 17:31
0

Спасибо, это решение работает, поэтому я приму его как хорошее решение, но это не ошибка. По какой-то причине я не мог установить информацию для объекта пагинации в родительском компоненте. Я решил это с помощью массива с той же архитектурой, что и объект разбивки на страницы в родительском элементе, и передав его дочернему элементу, ребенок имеет объект разбиения на страницы и наследует его от родительского массива. Ваше решение хорошее, но в объекте разбивки на страницы у меня много информации (я упростил ее только для запроса), и я предпочитаю передавать один объект, чем передавать 10 строковых переменных. Хотя ваше сообщение мне очень помогло.