如何在离子6中打开另一页中的一页

Question

你能告诉我吗?我从数据库中获取数据，并希望将其显示在页面上。但我想把它化成某种形式。为此，我将它们发送到带有表单的页面。我没法回到主页面。你能告诉我错误在哪里吗?提前谢谢你。

首页结论Orders.html

<ion-content class="ion-padding" >
<ion-grid>
<ion-row>
<ion-col *ngFor="let order of orders">
<app-order [order]="order"></app-order>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>

Orders.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, OnInit } from '@angular/core';

export interface Orders {
reservationDate: Date,
adultsNumber: Number,
childrenNumber: Number,
checkInDate: Date,
checkOutDate: Date,
totalPrice: Number,
}
@Component({
selector: 'app-bookings',
templateUrl: './bookings.page.html',
styleUrls: ['./bookings.page.scss'],
})
export class BookingsPage implements OnInit, OnDestroy {
orders: Orders[] = []

constructor(
private http: HttpClient
) { }
ngOnInit() {
this.http.get<Orders[]>('http://localhost:3000')
.subscribe(order => {
console.log('Response', this.orders)
this.orders = this.orders
})
}

Form page order.html

<ion-grid>
<ion-row>
<ion-col>
<ion-card class="order mb-3">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<span class="nav-link text-dark"
[class.active]="activeTab == 'general'"
[attr.aria-current]="activeTab == 'general'"
(click)="activeTab = 'general'"
role="button">
General
</span>
</li>
<li class="nav-item">
<span class="nav-link text-dark"
[class.active]="activeTab == 'users'"
[attr.aria-current]="activeTab == 'users'"
(click)="activeTab = 'users'"
role="button">
Users
</span>
</li>
</ul>
<div *ngIf="activeTab == 'general'">
<ion-list class="card" >
<ion-item lines="none">
<ion-label class="completed">Check-in {{orders. checkInDate}}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label class="completed">Check-out {{orders. checkOutDate}}</ion-label>
</ion-item>
<ion-item>
<ion-label class="completed">Number of guests {{orders. adultsNumber}}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label class="completed">Check-in {{orders. totalPrice}}</ion-label>
</ion-item>
<ion-item>
<ion-label class="completed">Number of guests {{orders. prepayment}}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label class="completed">Total Price {{orders. reservationDate}}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label class="completed">Prepayment {{orders. reservationDate}}</ion-label>
</ion-item>
</ion-list>
</div>
</ion-card>
</ion-col>

order.ts

import { HttpClient } from '@angular/common/http';
import { Component, Input, OnInit } from '@angular/core';
export interface Orders {
reservationDate: Date,
adultsNumber: Number,
childrenNumber: Number,
checkInDate: Date,
checkOutDate: Date,
totalPrice: Number,
}
@Component({
selector: 'app-order',
templateUrl: './order.page.html',
styleUrls: ['./order.page.scss'],
})
export class OrderPage implements OnInit {
@Input() order: Orders

activeTab = "general"

constructor(private http: HttpClient) { }
ngOnInit() {
console.log(this.order)
}
}

Answer 1

通过查看您的代码，按顺序。您使用order作为输入变量，但在order.html文件中，您使用orders作为变量名。

如果不是这样，请提供更多的细节来澄清您的问题。