Angular 2 ngIf 清除值

Question

如果我的项目的 url 属性的字符串值为空，我想隐藏一个表格行。所以这是我的代码:

<div class="tableRow" *ngIf="(project | async)?.Url">
     <div class="tableCell"><a target="_blank" href="{{ (project | async)?.Url}}">{{ this.localizationService.localized['projectUrl'] }}</a></div>
</div>

问题是，如果我使用上面的代码，将显示该行，但 href 中的 url 值为空。

一旦我删除了 ngIf，该行也会显示，但这次 url 不为空。

<div class="tableRow">
         <div class="tableCell"><a target="_blank" href="{{ (project | async)?.Url}}">{{ this.localizationService.localized['projectUrl'] }}</a></div>
    </div>

我做错了什么？

编辑:该项目是从我们的项目服务后端请求的。我在项目组件中有一个可观察对象。

I'm terrible at explaining, im sorry...

项目组件

private project: Observable<ProjectDetail>;
constructor() {
            super();

            // init projects stream
            this.project = projectsService.projectDetail;
    }

项目服务

public getProjectDetail(id: number) {
        this.http.get(this.projectDetailUrl + id)
            .map(this.utilService.extractData)
            .map(this.mapProjectDetails)
            .subscribe(data => {
                this.dataStore.projectDetail = data;
                this.projectDetail$.next(this.dataStore.projectDetail);
            },
            err => {
                this.httpErrorHandler.handleError(err);
            });
    }

Answer 1

尝试这样的事情:

<div class="tableRow" *ngIf="(project | async)?.Url.length > 0">
   <div class="tableCell"><a target="_blank" href="{{ (project | async)?.Url}}">{{ this.localizationService.localized['projectUrl'] }}</a></div>
</div>

*ngIf 可能会显示空字符串，但不会显示空值，因此如果您的变量返回空字符串，您的行可能会显示。我会以字符串长度为基础。