Question

我正在建立一个小型影院网站。我的问题是我有一个列表，当你点击监听按钮显示一个功能时，当你点击该功能时，它应该给你更多关于你点击的项目的详细信息。我曾尝试再次通过Angular Tour of Heroes，但我无法得到详细信息。

https://i.imgur.com/mzUcalv.png

以上是看到的，一些细节应该显示在页面上，但没有错误与它没有显示的原因相关。

`import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroesComponent }      from './heroes.component';
import { HeroService }          from './hero.service';
import { AccordionModule } from 'primeng/primeng';
import { AppRoutingModule }     from './app-routing.module';
import { RatingModule} from 'primeng/primeng';
import { GalleriaModule } from 'primeng/primeng';
import { CinemaComponent} from './cinema.component';
import { ContactComponent } from './contact.component';
import { AgmCoreModule } from 'angular2-google-maps/core';
import { ReviewsComponent } from './reviews.component';
import { TabViewModule } from 'primeng/primeng';
import { CinemaService } from './cinema.service';
import { CinemaDetailComponent } from './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 { }
`

应用模块

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { CinemaComponent } from './cinema.component';
import { ContactComponent } from './contact.component';
import { ReviewsComponent } from './reviews.component';
import { CinemaDetailComponent } from './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 {}

影院细节组件

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

import { Cinema }         from './cinema';
import { CinemaService }  from './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();
  }
}

应显示的HTML

<

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>

我的cinema.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CinemaDetailComponent } from './cinema-detail.component';
import { Cinema } from './cinema';
import { CinemaService } from './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文件

import { Cinema } from './cinema';
import { CINEMAS } from './mock-cinema';
import { Injectable } from '@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));
  }
}

任何人都可以帮忙弄清楚它为什么不显示？我没有发布Cinema的导出类，它只包含一个id：number和name：string或正确的数组（因为它显示了要点击的列表）。谢谢你的阅读。

无法在AngularJS中显示组件

0 个答案: