Question

我在创建自定义管道时出现此错误，并且所有工作正常，甚至我从数据库中获得的文本我都很好，因为我想要管道。

当我粘贴不像这样的异步代码时

ArticleBundle\Entity\Article:
    properties:
        id:
            expose: true
            groups: [group1, group2]
        name:
            expose: true
            serialized_name: name
            groups: [group1]
        label:
            expose: true
            serialized_name: label
            groups: [group2]

一切正常，没有错误。但是当我从数据库获取数据时，会发生此错误。

如何删除此错误？ .................................................. ..................................................

管

<a href="tel:{{contacts?.phoneNumber}}" class="number">{{'88004334433' | phone}}</a>

component.ts

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


@Pipe({
    name: 'phone'
})
export class PhonePipe {
    transform(tel, args) {
        const value = tel.toString().trim().replace(/^\+/, '');

        if (value.match(/[^0-9]/)) {
            return tel;
        }

        let country, city, number;

        switch (value.length) {
            case 10: // +1PPP####### -> C (PPP) ###-####
                country = 1;
                city = value.slice(0, 3);
                number = value.slice(3);
                break;

            case 11: // +CPPP####### -> CCC (PP) ###-####
                country = value[0];
                city = value.slice(1, 4);
                number = value.slice(4);
                break;

            case 12: // +CCCPP####### -> CCC (PP) ###-####
                country = value.slice(0, 3);
                city = value.slice(3, 5);
                number = value.slice(5);
                break;

            default:
                return tel;
        }

        if (country === 1) {
            country = '';
        }

        number = number.slice(0, 3) + '-' + number.slice(3);

        return (country + ' (' + city + ') ' + number).trim();
    }
}

HTML

   import {Component, OnInit} from '@angular/core';
import {combineLatest} from 'rxjs/observable/combineLatest';

import {ContactsService} from '../../services/contacts.service';
import {GoodsService} from '../../services/goods.service';
import {NavigationStart, Router} from '@angular/router';

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

    contacts;
    goods: any = [];
    menu;

    constructor(private contactsService: ContactsService,
                private goodsService: GoodsService,
                router: Router) {
        router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                this.menu = 'none';
            }
        });
    }

    ngOnInit() {
        combineLatest(
            this.contactsService.getContacts(),
            this.goodsService.getGoods()
        ).subscribe(data => {
            this.contacts = data[0][0];
            this.goods = data[1].find((element) => element['_id'] === '5a957797f36d280b142d1daa');
        });
    }

}

Answer 1

正在为未初始化或未分配的变量调用管道。在服务调用填充变量之前，该变量不存在。检查管道中的输入是一个很好的习惯。

在管道中添加一个支票，用于检查变量是否具有值。

if(!tel) return "";

错误TypeError：无法读取空管道异步的属性'toString'

1 个答案: