Angular 2 ngIf 清除值答案

【问题标题】：Angular 2 ngIf clears valueAngular 2 ngIf 清除值
【发布时间】：2017-03-31 14:59:08
【问题描述】：

如果我的项目的 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>

我做错了什么？

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

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

项目组件

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

【问题讨论】：

您为组件的项目属性分配了什么以及如何分配？请编辑您的问题并从组件中添加代码 sn-p。
已编辑。希望有帮助
我试图重现这个问题，但我不能。我建议您订阅可观察项目，将传入的值保存到新的组件属性并在 HTML 模板中使用该新属性而不是 (project | async)。
projectDetail$ 是什么类型的 observable？它是行为主题还是重播主题？如果不是，那么第二次使用异步管道不会发出当前值

标签： angular angular-ng-if

【解决方案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 可能会显示空字符串，但不会显示空字符串，因此如果您的变量返回空字符串，则可能会显示您的行。我会以字符串长度为基础。

【讨论】：