Question

我尝试制作详细信息页面，但是当我单击它时没有显示任何内容，控制台中没有错误

这是我的参考 https://angular.io/tutorial/toh-pt5#extract-the-id-route-parameter

这是我的app-routing.module.ts

jq -s '[.[].duration] | add' <<< "$sample_data"

这是我的tab1.page.html

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'detail/:id',
    loadChildren: () => import('./detail/detail.module').then( m => m.DetailPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

这是我的tab1.page.ts

  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let produk of listProducts">
        <ion-card>
          <img src={{produk.loc}} style="width: 200px; height: 200px;"alt="" (click)="gotoDetail(produk)" />
          <ion-card-content style="height: 50px;">
            <ion-card-title>{{produk.name}}</ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

这是我的detail.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { products } from '../products';
import { UtilsService } from '../services/utils.service';
import { category } from '../kategori';
import { DetailService} from '../services/detail.service';
import { Product } from '../produk';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit{
  public searchTerm: string = "";
  public items: any;
  listProducts = [];
  listKategori = [];
  produk: Product[] = [];
  slideopts = {
    slidesPerView : "3",
    spaceBetween: 0 ,
  };

  constructor(
    private router : Router,
    private utils: UtilsService,
    private detailService: DetailService
    ) {
    this.listProducts = products;
    this.listKategori = category;
    console.log(products);
    console.log(this.listProducts);
    console.log(category);
    console.log(this.listKategori);
    }
    ngOnInit() {
      this.getProduct();
    }

    getItems(ev: any){
      this.listProducts = products;
      let val = ev.target.value;

      if(val && val.trim() !=''){
        this.listProducts = this.listProducts.filter(produk =>{
          return produk.name.toLowerCase().indexOf(val.toLowerCase())>-1;
        });
      }
    }
    getKategori(itema: string){
      this.listProducts = products;
      let val1 = itema;

      if(val1 && val1.trim() !=''){
        this.listProducts = this.listProducts.filter(produk =>{
          return produk.kategori.toLowerCase().indexOf(val1.toLowerCase())>-1;
        });
      }
    }
    gotoDetail(produk: Product){
      this.router.navigate(['/detail', produk.id])
        }
    getProduct(): void{
      this.detailService.getProduct()
      .subscribe(produk => this.produk = produk);
    }
}

这是我的detail.service.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DetailService } from '../services/detail.service';
import { Product} from '../produk';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit{
  produk: Product;
  constructor(
    private route: ActivatedRoute,
    private detailService: DetailService
  ) {
   }
   ngOnInit() {
    this.getDetail();
  }

  getDetail(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.detailService.getDetail(id)
    .subscribe(produk => this.produk = produk)
  }

}

Answer 1

Looks line your problem

this.router.navigate（['/ detail'，produk.id]）-进行修改

详细信息页面未显示任何内容

1 个答案: