Angular4添加自定义管道异步值

Question

我的问题的简短解释：我有这行代码在我的HTML

至今：

<pre class="preFormattedText" [innerHtml]="(project | async)?.Remarks"></pre> 

然后我找到了有用的插件Linkify和这个职位上。所以我加了一个新的pipeComponent：

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

@Pipe({ name: 'linkify' }) 
export class LinkifyPipe implements PipeTransform { 
    transform(link: string): string { 
     return this.linkify(link); 
    } 
private linkify(plainText): string { 
    let replacedText; 
    let replacePattern1; 
    let replacePattern2; 
    let replacePattern3; 

    //URLs starting with http://, https://, or ftp:// 
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim; 
    replacedText = plainText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>'); 

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above). 
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim; 
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>'); 

    //Change email addresses to mailto:: links. 
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim; 
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>'); 

    return replacedText; 
    } 
} 

所以，我更新了我原来的代码行

<pre class="preFormattedText" [innerHtml]="(project | async)?.Remarks | linkify"></pre> 

但现在我得到这个错误：

ERROR TypeError: Cannot read property 'replace' of null

与我的这一段代码突出显示

<h3 class="subtitleH3">{{ this.localizationService.localized['globalComment'] }}</h3> 
<div> 
    <pre class="preFormattedText" [innerHtml]="(project | async)?.Remarks | linkify"></pre> 
</div> 

Answer 1

发现它，不得不实施一个简单的空检查