Angular 8日期格式修改请求：将YYYY-mm-dd转为yyyy-mm-dd HH:ii

Got it, let's tackle this date formatting issue in your Angular code. First, a quick note: you mentioned HH:ii—in Angular's DatePipe, minutes are represented with mm (not ii), so we'll use yyyy-MM-dd HH:mm as the target format to match your desired output.

Approach 1: Format Directly in the <user-service-item> Component #

Assuming your <user-service-item> component renders the date from the user input directly, using Angular's built-in DatePipe in its template is the simplest fix.

1. Ensure CommonModule is accessible:

   • If your component is part of a NgModule, add CommonModule to the module's imports array.
   • If it's an independent component, include CommonModule in the imports array of the component's @Component decorator.

2. Update the date display in the child component template:
   Replace any raw date output like:

   {{ user.yourDateProperty }}
   

   With the formatted version using the date pipe:

   {{ user.yourDateProperty | date:'yyyy-MM-dd HH:mm' }}
   

   Replace yourDateProperty with the actual date field name from your user object (e.g., createDate, lastActivityDate).

Approach 2: Format Dates in the Parent Component Before Passing #

If you need to reuse the formatted date elsewhere or handle logic in the parent, inject DatePipe to process dates upfront.

1. Inject DatePipe in the parent component:

   import { Component } from '@angular/core';
   import { DatePipe } from '@angular/common';
   
   @Component({
     selector: 'your-parent-component',
     templateUrl: './your-parent.component.html',
     providers: [DatePipe] // Register DatePipe as a provider
   })
   export class YourParentComponent {
     users: any[] = []; // Your existing users array
   
     constructor(private datePipe: DatePipe) {}
   
     // Helper method to format dates safely
     formatUserDate(date: Date | string): string {
       // Handle null/undefined dates with a fallback
       return this.datePipe.transform(date, 'yyyy-MM-dd HH:mm') || 'No date available';
     }
   }
   

2. Pass the formatted date to the child component:
   Update your parent template to send the pre-formatted date as an additional input:

   <div class="table-row-wraper" *ngFor="let user of users; let i = index" id="{{ user.id }}" >
     <ng-container [ngSwitch]="channel">
       <ng-container *ngSwitchCase="'bla'">
         <ng-container [ngSwitch]="user.role">
           <ng-container *ngSwitchCase="'user'">
             <user-service-item 
               [user]="users[i]" 
               [channel]="'userRole'"
               [formattedDate]="formatUserDate(users[i].yourDateProperty)"
             ></user-service-item>
           </ng-container>
         </ng-container>
       </ng-container>
     </ng-container>
   </div>
   

3. Add an input for the formatted date in the child component:
   In <user-service-item>'s TypeScript file, add a new input to receive the formatted value:

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'user-service-item',
     templateUrl: './user-service-item.component.html'
   })
   export class UserServiceItemComponent {
     @Input() user: any;
     @Input() channel: string;
     @Input() formattedDate: string; // New input for pre-formatted date
   }
   

   Then use {{ formattedDate }} in the child's template to display the date.

Quick Fix for Your Existing Template Syntax #

I noticed your template has unclosed elements and missing ngSwitch default cases, which can cause rendering issues. Here's the corrected structure:

<div class="table-row-wraper" *ngFor="let user of users; let i = index" id="{{ user.id }}" >
  <ng-container [ngSwitch]="channel">
    <ng-container *ngSwitchCase="'bla'">
      <ng-container [ngSwitch]="user.role">
        <ng-container *ngSwitchCase="'user'">
          <user-service-item [user]="users[i]" [channel]="'userRole'" ></user-service-item>
        </ng-container>
        <!-- Add default case for user roles -->
        <ng-container *ngSwitchDefault>
          <!-- Handle other user roles here -->
        </ng-container>
      </ng-container>
    </ng-container>
    <!-- Add default case for channels -->
    <ng-container *ngSwitchDefault>
      <!-- Handle other channel types here -->
    </ng-container>
  </ng-container>
</div> <!-- Missing closing div added -->

内容的提问来源于stack exchange，提问作者user3663709