我在转换 numberMy 代码时收到 DecimalPipe 错误:Serviceexport interface RoomList { roomNumber: number; roomType: string; amenities: string; price: number; pho...
我在转换数字时收到 DecimalPipe 错误
我的代码: 服务
export interface RoomList {
roomNumber: number;
roomType: string;
amenities: string;
price: number;
photos: string;
checkinTime: Date;
checkoutTime: Date;
rating: Number;
}
成分
import { Component } from '@angular/core';
import { Room, RoomList } from './rooms';
import { CurrencyPipe, DatePipe, DecimalPipe, LowerCasePipe, NgClass, NgFor, NgIf, NgStyle } from '@angular/common';
@Component({
selector: 'app-rooms',
standalone: true,
imports: [NgIf, NgFor, NgClass, NgStyle, DatePipe, CurrencyPipe, LowerCasePipe, DecimalPipe],
templateUrl: './rooms.component.html',
styleUrl: './rooms.component.scss'
})
export class RoomsComponent {
hotelName = "Hilton Hotel";
numberOfRoom = 10;
hideRoom = false;
rooms: Room = {
availableRooms: 10,
bookedRooms: 5,
totalRooms: 20
};
roomList: RoomList[] = [
{
roomNumber: 1,
roomType: 'Heloe',
amenities: "HN",
price: 5000,
photos: './image2',
checkinTime: new Date('11-Nov-2021'),
checkoutTime: new Date('12-Nov-2021'),
rating: 4.555
},
{
roomNumber: 2,
roomType: 'Donh',
amenities: "NB",
price: 10000,
photos: './image2',
checkinTime: new Date('17-Sep-2021'),
checkoutTime: new Date('20-Sep-2021'),
rating: 3.516
},
{
roomNumber: 3,
roomType: 'Holds',
amenities: "DN",
price: 200,
photos: './image3',
checkinTime: new Date('17-Sep-2021'),
checkoutTime: new Date('20-Sep-2021'),
rating: 3.99999
},
{
roomNumber: 4,
roomType: 'Bed',
amenities: "CT",
price: 1000,
photos: './image4',
checkinTime: new Date('11-Mar-2024'),
checkoutTime: new Date('20-July-2024'),
rating: 4.999
}
];
fnName() {
}
toggle() {
this.hideRoom = !this.hideRoom;
}
}
html
<div *ngIf="rooms.availableRooms > 0">
Rooms List
<!-- {{roomList}} -->
<table>
<tr>
<th>Order</th>
<th>Room Number</th>
<th>Room Type</th>
<th>Room Amenity</th>
<th>Room Price</th>
<th>Checkin Time</th>
<th>Checkout Time</th>
<th>Rating</th>
</tr>
<tr *ngFor="let room of roomList; let i=index;" [ngClass]="i%2 ? 'even' : 'odd'">
<td>{{i}}</td>
<td>{{room.roomNumber}}</td>
<td>{{room.roomType}}</td>
<td>{{room.amenities | lowercase}}</td>
<td>{{room.price | currency : 'INR'}}</td>
<td>{{room.checkinTime | date:'short'}}</td>
<td>{{room.checkoutTime | date: 'short'}}</td>
<td>{{room.rating | number}}</td>
</tr>
</table>
</div>
我尝试使用下面这种格式
<td>{{room.rating | number: '1.1-2'}}</td>
但出现了类似这样的错误
X [ERROR] NG9: No overload matches this call.
Overload 1 of 3, '(value: string | number, digitsInfo?: string | undefined, locale?: string | undefined): string | null', gave the following error.
Argument of type 'Number' is not assignable to parameter of type 'string | number'.
Overload 2 of 3, '(value: null | undefined, digitsInfo?: string | undefined, locale?: string | undefined): null', gave the following error.
Argument of type 'Number' is not assignable to parameter of type 'null | undefined'.
Overload 3 of 3, '(value: string | number | null | undefined, digitsInfo?: string | undefined, locale?: string | undefined): string | null', gave the following error.
Argument of type 'Number' is not assignable to parameter of type 'string | number | null | undefined'. [plugin angular-compiler]
src/app/rooms/rooms.component.html:30:23:
30 <td>{{room.rating | number: '1.1-2'}}</td>
~~~~~~
Error occurs in the template of component RoomsComponent.
src/app/rooms/rooms.component.ts:9:15:
9 templateUrl: './rooms.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~