Angular 2 ngIf clears value

I want to hide the tablerow if the string value of my project url property is empty. So this is my code:

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

      

The problem is, if I use the code above, the string is displayed, but the url value in the href is empty.

As soon as I remove the ngIf, the string is shown as well, but this time the URL is not empty.

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

      

what am I doing wrong?

EDIT: The project is being requested from our server within the project. I am observing in a project component.

I explain terribly, they are sorry ...

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

      

+3


source to share


1 answer


Try something like:

<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 can be displayed for empty strings, but not zeros, so if your variable returns an empty string, your string can be displayed. I would base it on the length of the line.

0


source







All Articles