Блог

я все еще учусь с angular, ionic и я в замешательстве, где моя вина, я смотрел на другой вопрос, но я все еще не понимаю, можете ли вы, ребята, мне помочь? и, может быть, у вас есть какой-то код, который это четко объясняет?

это мой product-list.component.ts

     import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-prod-list-view',
  templateUrl: 'product-list.component.html',
  styleUrls: ['product-list.component.css']
})

export class ProductListComponent {
  products = [
    {
      name: 'Phone XL',
      price: 799,
      description: 'A large phone with one of the best screens'
    },
    {
      name: 'Phone Mini',
      price: 699,
      description: 'A great phone with one of the best cameras'
    },
    {
      name: 'Phone Standard',
      price: 299,
      description: ''
    }
  ];

  share() {
    window.alert('The product has been shared!');
  }

  view() {
    window.alert('The product has been viewed!');
 }
}
 

это мой product-list.module.ts

 import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProductListComponent } from './product-list.component';

@NgModule({
  declarations: [
    ProductListComponent
  ],
  imports: [
    IonicPageModule.forChild(ProductListComponent),
  ],
  exports: [
    ProductListComponent
  ]
})
export class ProductListModule { }
 

и это мой html

 <h2>Products</h2>

<div *ngFor="let product of products">
    <h3>
        <a [title]="product.name   ' details'">
            {{ product.name }}
        </a>
    </h3>

    <p *ngIf="product.description">
        Description: {{ product.description }}
    </p>

    <button (click)="share()">
        Share
    </button>

    <button (click)="view()">
        View
    </button>

</div>
 

Похоже, вы что-то упускаете.

 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 

вы импортировали декоратор IonicPage, но не вызывали декоратор перед

@Component декоратор. Вам необходимо вызвать @IonicPage() перед @Component() для регистрации и отображения страницы в URL.

Это должно быть что-то вроде

 @IonicPage()
@Component({
  selector: 'page-prod-list-view',
  templateUrl: 'product-list.component.html',
  styleUrls: ['product-list.component.css']
});
 

Поскольку ваш компонент не зарегистрирован, вы получаете следующую ошибку.

Вы можете проверить более подробную информацию в

https://ionicframework.com/docs/v3/api/navigation/IonicPage/