错误类型错误:无法读取null pipe async的属性“toString”

我在创建自定义管道时遇到了这个错误,所有操作都很好,即使是从数据库中获取的文本,我也能很好地显示出来,就像我希望使用管道一样。

当我粘贴非异步代码时

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

一切正常,无误。但当我从数据库中获取数据时,就会发生这种错误。

如何删除此错误? 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

管

    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();
    }
}

组成部分ts

   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');
        });
    }

}

html

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