2
respostas

ERROR TypeError: Cannot read property 'length' of undefined

photo.list.resolver.ts

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { Photo } from '../photo';
import { PhotoService } from '../photo/photo.service';

@Injectable({providedIn: 'root'})
export class PhotoListResover implements Resolve <Observable<Photo[]>>{

    constructor(private service: PhotoService){}


    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Photo[]>{

        const userName = route.params.userName;
        return this.service.listFromUser(userName);        
    }    

}

app.routingmodules.ts

import { NgModule } from "@angular/core";
import {Routes, RouterModule} from '@angular/router';
import { PhotoListComponent } from "./photos/photo-list/photo-list.component";
import { PhotoFormComponent } from "./photos/photo-form/photo-form.component";

import {NotFoundComponent} from './errors/not-found/not-found.component';
import { PhotoListResover } from './photos/photo-list/photo-list.resolver';



const routes: Routes = [

            {
            path: 'user/:userName', 
            component: PhotoListComponent,
            resolve:{
                photos: PhotoListResover
            }
        },

            {
                path: 'p/add', component: PhotoFormComponent
            },

            {
                path: '**', component: NotFoundComponent
            }

];

@NgModule({

    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]

})

export class AppRoutingModules{}

photo-list.component

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

import { Photo } from '../photo/photo';
import { PhotoService } from '../photo/photo.service';

@Component({
  selector: 'app-photo-list',
  templateUrl: './photo-list.component.html',
  styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {

  photos: Photo[] = []; 
  filter: string = '';


  constructor(
    //  private photoSercive: PhotoService,
    private activatedRoute: ActivatedRoute
  ) { }

  ngOnInit(): void {

    //const userName =  this.activatedRoute
    //.snapshot
    //.params
    //.userName;

    //this.photoSercive
    //.listFromUser(userName)
    //.subscribe(photos =>this.photos = photos);

      this.photos = this.activatedRoute.snapshot.data.photos;



  }
}

Galera o meu photo-list.component com resolve, não esta passando a lista de fotos. Comentei acima da chamada do resolver o código antigo sem ele. Ja verifiquei mais de 10 vezes e não consigo achar o erro no console exibe.

` Angular is running in the development mode. Call enableProdMode() to enable the production mode. PhotoListComponent.html:16 ERROR TypeError: Cannot read property 'length' of undefined at PhotosComponent../src/app/photos/photo-list/photos/photos.component.ts.PhotosComponent.groupColumns (photos.component.ts:25) at PhotosComponent../src/app/photos/photo-list/photos/photos.component.ts.PhotosComponent.ngOnChanges (photos.component.ts:19) at checkAndUpdateDirectiveInline (core.js:9239) at checkAndUpdateNodeInline (core.js:10507) at checkAndUpdateNode (core.js:10469) at debugCheckAndUpdateNode (core.js:11102) at debugCheckDirectivesFn (core.js:11062) at Object.eval [as updateDirectives] (PhotoListComponent.html:16) at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054) at checkAndUpdateView (core.js:10451) View_PhotoListComponent_0 @ PhotoListComponent.html:16 proxyClass @ compiler.js:10173 push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:11306 push../nodemodules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719 (anonymous) @ core.js:4578 ./nodemodules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 ./node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150 push../nodemodules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779 push../nodemodules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578 (anonymous) @ core.js:4462 ./node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 onInvoke @ core.js:3820

2 respostas

Oi Luciano,

Aparentemente seu código está dando erro no arquivo photos.component.ts (linha 25).

Você poderia postar o código desse componente?

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

import { Photo } from '../../photo/photo';

@Component({
  selector: 'ap-photos',
  templateUrl: './photos.component.html',
  styleUrls: ['./photos.component.css']
})
export class PhotosComponent implements OnChanges {

  @Input() photos: Photo[] = [];
  rows: any[] = [];

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    if(changes.photos) 
      this.rows = this.groupColumns(this.photos);
  }

  groupColumns(photos: Photo[]) {
    const newRows = [];
    for(let index = 0; index < photos.length; index+=3) {
      newRows.push(photos.slice(index, index + 3));
    }                            
    return newRows;
  }
}