javascript - Can't display a component in AngularJS -
i building small cinema website. issue have list, when click listen button displayed function, when click function should give more details on item have clicked. have tried work through angular tour of heroes again can't details show up.
https://i.imgur.com/mzucalv.png
the above seen, details should shown on page there no error relevant why not showing.
`import { ngmodule } '@angular/core'; import { browsermodule } '@angular/platform-browser'; import { formsmodule } '@angular/forms'; import { appcomponent } './app.component'; import { dashboardcomponent } './dashboard.component'; import { herodetailcomponent } './hero-detail.component'; import { heroescomponent } './heroes.component'; import { heroservice } './hero.service'; import { accordionmodule } 'primeng/primeng'; import { approutingmodule } './app-routing.module'; import { ratingmodule} 'primeng/primeng'; import { galleriamodule } 'primeng/primeng'; import { cinemacomponent} './cinema.component'; import { contactcomponent } './contact.component'; import { agmcoremodule } 'angular2-google-maps/core'; import { reviewscomponent } './reviews.component'; import { tabviewmodule } 'primeng/primeng'; import { cinemaservice } './cinema.service'; import { cinemadetailcomponent } './cinema-detail.component'; @ngmodule({ imports: [ browsermodule, formsmodule, approutingmodule, accordionmodule, ratingmodule, galleriamodule, tabviewmodule, agmcoremodule.forroot({ apikey: 'aizasydmqwd7dm4pcmvkzp_uopvikbyjpmwzhem' }) ], declarations: [ appcomponent, dashboardcomponent, herodetailcomponent, heroescomponent, cinemacomponent, contactcomponent, reviewscomponent, cinemadetailcomponent ], providers: [ heroservice, cinemaservice ], bootstrap: [ appcomponent ] }) export class appmodule { } ` app module
import { ngmodule } '@angular/core'; import { routermodule, routes } '@angular/router'; import { dashboardcomponent } './dashboard.component'; import { heroescomponent } './heroes.component'; import { herodetailcomponent } './hero-detail.component'; import { cinemacomponent } './cinema.component'; import { contactcomponent } './contact.component'; import { reviewscomponent } './reviews.component'; import { cinemadetailcomponent } './cinema-detail.component'; const routes: routes = [ { path: '', redirectto: '/dashboard', pathmatch: 'full' }, { path: 'dashboard', component: dashboardcomponent }, { path: 'detail/:id', component: herodetailcomponent }, { path: 'heroes', component: heroescomponent }, { path: 'cinema', component: cinemacomponent }, { path: 'contact', component: contactcomponent }, { path: 'reviews', component: reviewscomponent }, { path: 'detail/:id', component: cinemadetailcomponent} ]; @ngmodule({ imports: [ routermodule.forroot(routes) ], exports: [ routermodule ] }) export class approutingmodule {} cinema detail component
import { component, oninit } '@angular/core'; import { activatedroute, params } '@angular/router'; import { location } '@angular/common'; import { cinema } './cinema'; import { cinemaservice } './cinema.service'; @component({ moduleid: module.id, selector: 'my-cinema-detail', templateurl: 'cinema-detail.component.html', styleurls: [ 'cinema-detail.component.css' ] }) export class cinemadetailcomponent implements oninit { cinema: cinema; constructor( private cinemaservice: cinemaservice, private route: activatedroute, private location: location ) {} ngoninit(): void { this.route.params.foreach((params: params) => { let id = +params['id']; this.cinemaservice.getcinema(id) .then(cinema => this.cinema = cinema); }); } goback(): void { this.location.back(); } } the html should displayed
< div *ngif="cinema"> <h2>{{cinema.name}} details!</h2> <div> <label>id: </label>{{cinema.id}}</div> <div> <label>name: </label> <input [(ngmodel)]="cinema.name" placeholder="name" /> </div> <button (click)="goback()">back</button> </div> my cinema.component.ts
import { component, oninit } '@angular/core'; import { router } '@angular/router'; import { cinemadetailcomponent } './cinema-detail.component'; import { cinema } './cinema'; import { cinemaservice } './cinema.service'; @component({ moduleid: module.id, selector: 'my-cinema', templateurl: 'cinema.component.html', styleurls: [ 'cinema.component.css' ] }) export class cinemacomponent implements oninit { cinemas: cinema[]; selectedcinema: cinema; constructor( private router: router, private cinemaservice: cinemaservice) { } getcinemas(): void { this.cinemaservice.getcinemas().then(cinemas => this.cinemas = cinemas); } ngoninit(): void { this.getcinemas(); } onselect(cinema: cinema): void { this.selectedcinema = cinema; } gotodetail(): void { this.router.navigate(['/detail', this.selectedcinema.id]); } } cinema.service.ts file
import { cinema } './cinema'; import { cinemas } './mock-cinema'; import { injectable } '@angular/core'; @injectable() export class cinemaservice { getcinemas(): promise<cinema[]> { return promise.resolve(cinemas); } getheroesslowly(): promise<cinema[]> { return new promise<cinema[]>(resolve => settimeout(resolve, 2000)) // delay 2 seconds .then(() => this.getcinemas()); } getcinema(id: number): promise<cinema> { return this.getcinemas() .then(cinemas => cinemas.find(cinema => cinema.id === id)); } } can figure out why isn't displayed? haven't posted export class cinema contains id:number , name:string or array correct (as displays list click on). reading.
Comments
Post a Comment