3

I want to hide a tablerow if the string value of the url property of my project 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 that if i use the code above the row is beeing displayed but the url value in the href is empty.

As soon as i delete the ngIf the row 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 requested from our backend in the projectservice. I have an observable in the project component.

I'm terrible at explaining, im 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);
            });
    }
Yannik Zimmermann
  • 103
  • 7
  • What do you assign to the project property of your component and how? Please edit your question and add a code snippet from the component. – Ján Halaša Mar 31 '17 at 15:07
  • edited. hope that helps – Yannik Zimmermann Mar 31 '17 at 15:14
  • I tried to reproduce the problem, but I couldn't. I would suggest you to subscribe to the project observable, save incoming value(s) to a new component property and use that new property in the HTML template instead of (project | async). – Ján Halaša Mar 31 '17 at 15:34
  • What type of observable is `projectDetail$`? Is it a Behavior or Replay subject? If not, then the second use of the async pipe wont emit the current value – adharris Mar 31 '17 at 16:56

1 Answers1

0

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 may display for empty strings, but not nulls, so if your variable is returning an empty string, your row might display. I would base it off the string length.

jhhoff02
  • 1,179
  • 1
  • 17
  • 24