Ionic 4新闻阅读器Pipe报错：无法读取undefined的'toString'属性

Let's break down what's causing this error and fix it step by step.

The Root Causes #

1. Undefined pubDate during async loading: Since you're assigning pubDate asynchronously, the template renders before the value is set—so pubDate is undefined initially. Your pipe tries to call .toString() on this undefined value, hence the Cannot read property 'toString' of undefined error.
2. Incorrect pipe parameter type: Your pipe expects a uutissyote object, but pubDate is actually a string (like 2019-02-19 04:02:00), not the full interface type.
3. Accidental pipe code in component: Your uutinen.page.ts includes the pipe definition, which doesn't belong there—pipes should live in their own files and be declared in your Angular module.

Fixes #

1. Correct the Date Pipe (julkaisuaika.pipe.ts)

Update the pipe to handle undefined values, accept the correct string type, and format the date to your desired 19.2.2019 format:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'julkaisuaika'
})
export class JulkaisuaikaPipe implements PipeTransform {
  transform(pubDate?: string): string {
    // Handle undefined case first to avoid errors
    if (!pubDate) return '';

    // Parse the date string into a Date object
    const publicationDate = new Date(pubDate);
    
    // Use Finnish locale to get DD.M.YYYY format
    return publicationDate.toLocaleDateString('fi-FI', {
      day: 'numeric',
      month: 'numeric',
      year: 'numeric'
    });
  }
}

2. Clean Up Your Component (uutinen.page.ts)

Remove the pipe code from your component file—keep only the component logic, and ensure you're assigning pubDate correctly as a string:

import { Component, OnInit } from '@angular/core';
import { uutissyote } from './uutissyote.interface';

@Component({
  selector: 'app-uutinen',
  templateUrl: './uutinen.page.html',
  styleUrls: ['./uutinen.page.scss'],
})
export class UutinenPage implements OnInit {
  uutinen?: uutissyote;
  pubDate?: string;
  id: number; // Make sure this value is properly set

  ngOnInit() {
    // Your async data fetch logic here
    this.fetchNewsData().then(data => {
      this.uutinen = data.items[this.id];
      this.pubDate = data.items[this.id].pubDate; // Assign the string date value
    });
  }

  meneTakaisin() {
    // Add your back navigation logic here
  }

  private fetchNewsData(): Promise<any> {
    // Replace with your actual data fetch (HTTP call, etc.)
    return Promise.resolve({ items: [] });
  }
}

3. Optional: Add Extra Safety in the Template

While the pipe now handles undefined values, you can add the safe navigation operator for an extra layer of protection:

<p><b>{{ uutinen?.categories[0] }}</b> {{ pubDate? | julkaisuaika }}</p>

4. Declare the Pipe in Your Module

Don't forget to register the pipe in your Angular module so it's available to your component:

// app.module.ts or your feature module
import { JulkaisuaikaPipe } from './path/to/julkaisuaika.pipe';

@NgModule({
  declarations: [
    // ... other components/directives
    JulkaisuaikaPipe
  ],
  // ... other module configurations
})
export class AppModule { }

Why This Works #

• We first check if pubDate exists before processing it, eliminating the undefined error.
• We correct the pipe's parameter type to match the actual string value of pubDate.
• Using toLocaleDateString('fi-FI') gives you the exact date format you want without manual string manipulation.

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