Question

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

<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>

我做错了什么？

修改该项目是从项目服务的后端请求的。我在项目组件中有一个observable。

我很难解释，对不起......

ProjectComponent

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

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

ProjectService

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可能显示空字符串，但不显示空值，因此如果您的变量返回空字符串，则可能会显示您的行。我会把它从字符串长度开始。

角度2 ngIf清除值

1 个答案: