Issue
Recently I started learning Angular but I faced an issue today. I have the following Component:
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../home/shared.service';
import { IData } from '../data/IData';
@Component({
selector: 'app-current-article',
templateUrl: './current-article.component.html',
styleUrls: ['./current-article.component.css']
})
export class CurrentArticleComponent implements OnInit {
data: IData;
symbols: number = 150;
showReadMore = true;
contentToShow: string = "";
constructor(private _sharedService: SharedService) { }
ngOnInit() {
this.data = this._sharedService.sharedData;
this.contentToShow = this.data.content;
}
readMore() {
//this.symbols += 100;
}
}
The "data" property is an object with the following properties: title (string), authorId (number) and content (string).
I have also followed the solution of this post and made this service:
import { Injectable } from '@angular/core';
import { IData } from '../data/IData';
@Injectable()
export class SharedService{
sharedData: IData = {
title: "",
authorID: 0,
content: ""
};
insertData(data: IData){
this.sharedData.title = data.title;
this.sharedData.authorID = data.authorID;
this.sharedData.content = data.content;
}
}
And I have view for the Component as well:
<div *ngIf="data.title">
<h1>{{ data.title }}</h1>
<h5>Author ID: {{ data.authorID }}</h5>
<div>
<span>{{ contentToShow }} </span>
<span>
<a href="#" *ngIf="showReadMore" (click)="readMore()">Read More ↪</a>
</span>
</div>
</div>
Here comes my problem. The "contentToShow" property seems to be undefined and I find this strange... However if I try to use "data.content" it works just fine and displays my data. What is happening? I am tring to resolve it for 2 hours and I am starting to think it must be something really obvious but I do not know what... Thank you!
Solution
At the point you assign the value of data.content
to contentToShow
the property isn't set, so contentToShow
seems not to be set. You need to know that Javascript works with "call-by-reference", but it works only with Arrays or Objects and not with Primitives (like string, number, etc).
Because of that you see some value, when you're using data.content
. Because you access the property directly from the object and the changed value is displayed in the html.
For better understand this post Is JavaScript a pass-by-reference or pass-by-value language? can help.
Two ways to solve your problem can be: You can use data.content
or you can notify your component that the values have changed, e.g. by using an Observable.
The last can look something like this:
@Injectable()
export class SharedService{
notfiySubject: Subject< IData > = new Subject();
...
insertData(data: IData){
this.sharedData.title = data.title;
this.sharedData.authorID = data.authorID;
this.sharedData.content = data.content;
// Emits the subject
this.notifySubject.next(this.sharedData);
}
}
And in you component you would subscribe to that Subject:
this._sharedService.notifySubject.subscribe(data => {
// Here you can set `contentToShow` with data or _sharedServices.sharedData
});
Answered By - Batajus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.