Как указать функцию как переменную шаблона в приложении Ionic Angular?
У меня есть Orderобъект и объект клиента. ВJSON payload для Order объект выглядит следующим образом:
{
"order_number" : 1,
"customer_id": 1
}
И это JSON payload для Customer объект
{
"customer_id": 1,
"customer_name" : 1,
}
У меня есть страница заказов, на которой я хочу отобразить список заказов. Но вместоorder.customer_id это было показать customer_name
Для меня есть getCustomerById который берет customer_id в качестве параметра и возвращает customer_name.
Это мое OrdersPage учебный класс:
import { Component, OnInit } from '@angular/core';
import { OrderService } from '../../services/order.service';
import { Order } from '../../models/order.model';
import { NavController, LoadingController } from '@ionic/angular';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { CustomerService } from 'src/app/services/customer.service';
import { Customer } from 'src/app/models/customer.model';
@Component({
selector: 'app-orders',
templateUrl: './orders.page.html',
styleUrls: ['./orders.page.scss'],
})
export class OrdersPage implements OnInit {
sender;
customerName: string;
destinationName: string;
// viewOrders = false;
error;
orders: Order[];
subscription: Subscription;
constructor(private orderService: OrderService,
private navCtrl: NavController,
private router: Router,
private customerService: CustomerService
) { }
ngOnInit() {
this.orderService.refreshNeeded
.subscribe(() => {
this.getAllOrders();
});
this.getAllOrders();
}
getAllOrders() {
this.orderService.getAllOrders().subscribe(
(res: Order[]) => {
this.orders = res;
},
(error) => {
this.error = error;
});
}
getCustomerById(customerId: number): string {
this.customerService.getCustomerById(customerId).subscribe(
(customer: Customer) => {
this.customerName = customer.name;
}
);
return this.customerName;
}
}
Это orders.page.html
<ion-header>
<ion-toolbar color="dark">
<ion-button slot="end">
<ion-menu-button> </ion-menu-button>
</ion-button>
<ion-title>Orders</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-row>
<ion-col size-md="8" offset-md="2">
<ion-row class="header-row ion-text-center">
<ion-col>
Order number
</ion-col>
<ion-col>
Customer
</ion-col>
</ion-row>
<ion-row *ngFor="let order of orders; let i = index" class="data-row ion-text-center">
<ion-col>
{{order.order_number}}
</ion-col>
<ion-col>
{{order.customer_id}}
</ion-col>
<!-- <ion-col>
{{getCustomerById(order?.customer_id)}}
</ion-col> -->
</ion-row>
</ion-col>
</ion-row>
</ion-content>
Этот html работает, но возвращает order.customer_id не customer_nameЯ попытался получить имя, назвав функцию в шаблоне таким образом {{getCustomerById(order?.customer_id)}} не работает и в консоли тоже нет ошибок.
Как лучше всего получить customer_name поле в списке заказов?
Это мое customer.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { Customer } from '../models/customer.model';
import { catchError, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class CustomerService {
url = 'http://api.mydomain.com';
constructor( ) { }
getAllCustomers(): Observable<Customer[]> {
return this.httpClient.get<Customer[]>(`${this.url}/customers`).pipe();
}
getCustomerById(id: number): Observable<Customer> {
return this.httpClient.get<Customer>(`${this.url}/customer/${id}`).pipe();
}
}
3 ответа
Как отметил @Muhammad Umair, делать запрос на сервер для каждого имени клиента - не лучший вариант. Лучше всего сделать один запрос для получения всех желаемых имен курсоров. В приведенном ниже решении это не учитывается.
Лучше всего использовать трубку.
"Канал принимает данные как входные и преобразует их в желаемый результат". Угловой документ
Обратите внимание, что ваш запрос на получение имени курсора является асинхронным (вот почему в вашем шаблоне ничего не отображается), здесь вам также необходимо использовать асинхронный канал:
<ion-col>
{{ order.customer_id | getCustomerName | async }}
</ion-col>
И вот канал (который вы должны вставить в свои объявления в модуле вашего компонента.
import { Pipe } from '@angular/core';
@Pipe({
name: 'getCustomerName'
})
export class CustomerNamePipe {
constructor(private customerService: CustomerService) { }
transform(userIds, args) {
return this.customerService.getCustomerById(curstomerId);
}
}
Опять же, не лучшее решение, но учитывая обстоятельства, вы не можете ничего изменить в API. Вы можете изменить свой файл на это.
import { Component, OnInit } from '@angular/core';
import { OrderService } from '../../services/order.service';
import { Order } from '../../models/order.model';
import { NavController, LoadingController } from '@ionic/angular';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { CustomerService } from 'src/app/services/customer.service';
import { Customer } from 'src/app/models/customer.model';
@Component({
selector: 'app-orders',
templateUrl: './orders.page.html',
styleUrls: ['./orders.page.scss'],
})
export class OrdersPage implements OnInit {
sender;
customerName: string;
destinationName: string;
// viewOrders = false;
error;
orders: Order[];
subscription: Subscription;
constructor(private orderService: OrderService,
private navCtrl: NavController,
private router: Router,
private customerService: CustomerService
) { }
ngOnInit() {
this.orderService.refreshNeeded
.subscribe(() => {
this.getAllOrders();
this.getAllCustomers();
});
this.getAllOrders();
this.getAllCustomers();
}
getAllOrders() {
this.orderService.getAllOrders().subscribe(
(res: Order[]) => {
this.orders = res;
},
(error) => {
this.error = error;
});
}
getAllCustomers() {
this.customerService.getAllCustomers().subscribe(
(customers: Customer[]) => {
this.customers = customers;
}
(error) => {
this.error = error;
});
}
getCustomerById(customerId: number): string {
const customer = this.customers.filter(customer => customer.customer_id === customerId );
return customer.customer_name;
}
}
Как @Noelmout упоминает, используя pipe, я смог получить customer_name с небольшими изменениями.
Это CustomerNamePipe
import { Pipe, PipeTransform } from '@angular/core';
import { CustomerService } from '../services/customer.service';
import { Customer } from '../models/customer.model';
import { pluck } from 'rxjs/operators';
@Pipe({
name: 'getCustomerName'
})
export class CustomerNamePipe implements PipeTransform {
customer: Customer;
constructor(private customerService: CustomerService) { }
transform(curstomerId, args) {
return this.customerService.getCustomerById(curstomerId).pipe(pluck('customer_name'));
}
}
Это order.page.html
<ion-col>
{{ order.customer_id | getCustomerName | async }}
</ion-col>