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