The program is not recognizing the property name. I am using the Input() function and an API to display all tweets from my API. Despite trying various solutions like changing names and properties, it still doesn't work. Is there a simple way to resolve this issue?
tweet.component.html
<mat-card>
<mat-card-header>
<mat-card-title>
{{ tweet.name}}
</mat-card-title>
<mat-card-subtitle>added on {{ tweet.created | date: longDate }}</mat-card-subtitle>
</mat-card-header>
</mat-card>
tweet.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Tweet } from '../tweet.model';
import { TweetDataService } from 'src/app/tweet-data.service';
@Component({
selector: 'app-tweet',
templateUrl: './tweet.component.html',
styleUrls: ['./tweet.component.css']
})
export class TweetComponent implements OnInit {
@Input() public tweet: Tweet;
constructor() {
}
ngOnInit() {
}
}
tweet.model.ts
import { Reaction } from './reaction.model';
export class Tweet{
constructor(
private _name: string,
private _reactions = new Array<Reaction>(),
private _created = new Date()
) {}
static fromJSON(json: any): Tweet {
const rec = new Tweet(
json.text,
json.reactions,
json.created
);
return rec;
}
toJSON(): any {
return {
name: this.name,
reactions: this.reactions.map(re => re.toJSON()),
created: this.created
};
}
get name(): string {
return this._name;
}
get created(): Date {
return this._created;
}
get reactions(): Reaction[] {
return this._reactions;
}
addReaction(text: string) {
this._reactions.push(new Reaction(text));
}
}
dataservice
import { Injectable } from '@angular/core';
import { Observable, Subject, of } from 'rxjs';
import { map, catchError, tap } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';
import { Tweet } from './tweet/tweet.model';
@Injectable({
providedIn: 'root'
})
export class TweetDataService {
public loadingError$ = new Subject<string>();
constructor(private http: HttpClient) {}
get recipes$: Observable<Tweet[]> {
return this.http.get(`${environment.apiUrl}/Tweet/`).pipe(
catchError(error => {
this.loadingError$.next(error.statusText);
return of(null);
}),
map((list: any[]): Tweet[] => list.map(Tweet.fromJSON))
);
}
addNewTweet(tweet: Tweet) {
return this.http.post(`${environment.apiUrl}/tweets/`, tweet.toJSON());
}
getTweet$(id): Observable<Tweet> {
console.log(`${environment.apiUrl}/tweets/${id}`);
return this.http
.get(`${environment.apiUrl}/tweets/${id}`)
.pipe(map((rec: any): Tweet => Tweet.fromJSON(rec)));
}
}