Angular not rendering value from app.component in HTML - javascript

How are you doing?
I'm trying to render a value acquired from http in app.component.ts to the HTML but it isn't working.
The value appears on console.log as a string but when I try to use it with this.date = dateObj it returns undefined.
When I access it from inside parseString() it doesn't work, but before it, it works. See on example for date = 'today'.
The HTML renders 'today' but not the value of dateObj. The value of dateObj is a string, just to remember.
HTML
<h2>{{date}}</h2>
<input type="submit" value="test" (click)="onClickMe()"/>
APP.COMPONENT.TS
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { HttpErrorResponse } from '#angular/common/http';
import { HttpHeaders } from '#angular/common/http';
import { parseString } from 'xml2js';
#Component({
'...'
})
export class AppComponent implements OnInit {
title = 'testing';
date: string;
constructor() {}
ngOnInit(): void{}
onClickMe(){
** removed for brevity. HTTP REQUEST code **
//retrieve http to data
this.http.post(url, body, {
headers: new HttpHeaders()
.set('Content-Type', 'text/xml')
.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS')
.append('Access-Control-Allow-Origin', '*')
.append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method")
, responseType:'text'}).subscribe(data => {
// Read the result field from the response in XML and transform to JSON.
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(data,"text/xml");
//today appears in HTML
this.date = 'today';
parseString(data, function (err, result) {
var stringified = JSON.stringify(result);
console.log(stringified);
let jsonObject = JSON.parse(stringified);
let dateObj = jsonObject['date'];
//dateObj works fine on console.log but doesn't appear in HTML when rendering with {{date}}
this.date = dateObj;
});
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
console.log('An error occurred:', err.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
}
}
);
}
}
The question is, there is a way to do that? How should I do it so I could render the value in HTML?

assign it as this.date = dateObj; instead of date = dateObj;.
If that didn't fix, trigger a change detection by injecting the ChangeDetectorRef through constructor and calling the detectChanges() method.
import { ChangeDetectorRef } from '#angular/core';
constructor(private ref: ChangeDetectorRef){}
// call detectChanges() after this.date = dateObj;
this.date = dateObj;
this.ref.detectChanges();

Related

Why is it showing Error : CastError: Cast to ObjectId failed for value "$this.categoryId" at path "category" for model "Product"?

I am using nodejs with MongoDB in the backend to create my application and Angular to the front-end. As I try to get the value from the postman for the 'products' under a specific 'category' the Postman responds with success message and delivers the values. But the real problem arises when I try to view through the front end.
It shows the following error once I try to get the products inside the specific category:
CastError: Cast to ObjectId failed for value "$this.categoryId" at path "category" for model "Product"
at model.Query.exec
I have checked the backend and it runs smoothly without any error. I guess the error meant'categoryId' parameter is not getting the valid value but it can't be as my localhost is redirected to the individual categoryId link http://localhost:4200/categories/5f004ae05ca53a0da8d5c043 but it is not able to load the product inside the category.
Here is how I have written code in my TypeScript category.component.ts,
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router' ;
import { RestApiService } from '../rest-api.service' ;
import { DataService } from '../data.service';
#Component({
selector: 'app-category',
templateUrl: './category.component.html',
styleUrls: ['./category.component.scss']
})
export class CategoryComponent implements OnInit {
categoryId: any;
category: any;
page = 1;
constructor(
private data: DataService,
private activatedRoute: ActivatedRoute,
private rest: RestApiService
) { }
ngOnInit() {
this.activatedRoute.params.subscribe(res => {
this.categoryId = res['_id'];
this.getProducts();
});
}
get lower() {
return 10 * (this.page - 1) + 1;
}
get upper() {
return Math.min(10 * this.page, this.category.totalProducts);
}
async getProducts(event ?: any) {
if (event) {
this.category = null;
}
try {
const data = await this.rest.get(
'http://localhost:397/api/categories/$this.categoryId?page=${this.page -1}'
);
data['success']
? (this.category = data)
:this.data.error(data['message']);
}catch (error) {
}
}
}
How could I fix this issue? I am hopeful for positive responses.
At the try catch block towards the end of your code you seem to have mistakenly wrapped the request URL in normal quotes '' instead of back ticks ``.
Which is why mongoose is showing a cast error, as it is unable to parse $this.categoryId. Try this instead:
const data = await this.rest.get(
`http://localhost:397/api/categories/${this.categoryId}?page=${this.page -1}`
);

Adding an src from an API in Angular7

This is my component.ts where when it's loaded I get the data from the api, which I can see in the console.log, I do infact get my array of 10 objects (they come in groups of 10 on the api). I have the correct path in the API for the source code of the first image in the array of 10 which I typed to out the correct path for in normal http/javascript format of data.hits.hits[n]._source.images[n].urls.original. However when I try to put it in angular it can't read the data value as it is right now since it's out of scope, but I can't figure out how to word it in a better way.
import { Component, OnInit } from '#angular/core';
import { ConfigService } from '../../config.service';
import { Observable } from 'rxjs';
#Component({
selector: 'app-property-binding',
templateUrl: './property-binding.component.html',
styleUrls: ['./property-binding.component.css']
})
export class PropertyBindingComponent implements OnInit {
private isHidden : boolean;
public zeroImage : string;
private Photos : Observable<Object>;
constructor(private configService: ConfigService) { }
ngOnInit() {
//doing the API call
this.Photos = this.configService.getConfig();
this.Photos.subscribe((data) => console.log(data));
}
toggle() : void {
this.isHidden = !this.isHidden;
if(this.isHidden){
//var zeroImg = document.createElement("img");
this.zeroImage.src = data.hits.hits[0]._source.images[0].urls.original;
}
}
}
Here is the Angular html page that should property bind the src with the variable that I want.
<p>
View Artworks
</p>
<button class="btn btn-info" (click)="toggle()">Show Artwork</button>
<div class="col-md-4" *ngIf="isHidden">
<img [src]="zeroImage">
</div>
Here is the service method that I have the method that makes the API call
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { HttpHeaders } from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class ConfigService {
private httpOptions = {
headers: new HttpHeaders({
'ApiKey': 'my_personal_key'
})
};
private configUrl = 'https://api.art.rmngp.fr/v1/works';
constructor(private http: HttpClient) { }
getConfig(){
let obs = this.http.get(this.configUrl, this.httpOptions)
console.log("Inside the getConfig method, before subscribe, doing API call" +
obs);
//might not need to subscribe here??
//obs.subscribe((response) => console.log(response))
return obs;
//return this.http.get(this.configUrl, this.httpOptions);
}
}
And slightly unrelated code, this is the normal http/javascript where I wrote the code Outside of Angular, which works perfectly fine.
function displayPhoto(){
fetch('https://api.art.rmngp.fr/v1/works/, {headers: {ApiKey: "my_personal_key"}})
.then(function(response){
return response.json();
})
.then(function(data){
document.getElementById("zeroImg").src = data.hits.hits[0]._source.images[0].urls.original;
Again, the API call in Angular works, I can see I am pulling the data successfully, I however can not set the image to the first image in the set of data and have been struggling with it. any help will help
You are not doing anything with the data when you subscribe
this.Photos.subscribe((data) => console.log(data));
You have not done anything with the data here.
zeroImg.src = data.hits.hits[0]._source.images[0].urls.original;
zeroImg is a string and makes no sense to set a src property on it and data is undefined at the point. The only place there is a data variable is in your subscription function but it is not available here.
The following will set the src of the image
this.Photos.subscribe((data) => {
this.zeroImg = data.hits.hits[0]._source.images[0].urls.original;
});
Make the toggle function just toggle the isHidden flag and get rid of the rest.
ngOnInit() {
//doing the API call
this.Photos = this.configService.getConfig();
this.Photos.subscribe((data) => {
this.zeroImg = data.hits.hits[0]._source.images[0].urls.original;
});
}
toggle() : void {
this.isHidden = !this.isHidden;
}

TypeError: this.db.list(...).subscribe is not a function

I develop an Ionic 3.9 chat with Firebase and I have the following error:
TypeError: this.db.list(...).subscribe is not a function
Here is my code:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
#IonicPage()
#Component({
selector: 'page-consersation',
templateUrl: 'conversation.html',
})
export class ConversationPage {
username: string = '';
message: string = '';
_chatSubscription;
s;
messages;
constructor(public db: AngularFireDatabase,
public navCtrl: NavController, public navParams: NavParams) {
this.username = this.navParams.get('username');
this._chatSubscription = this.db.list('/conversation').subscribe( data => {
this.messages = data;
});
}
sendMessage() {
this.db.list<any>('/conversation').push({
username: 'romain',
message: this.message
}).then( () => {
// message is sent
});
this.message = '';
}
}
Can you help me please?
In this.db.list('/conversation').subscribe( you are missing something between the .list(...) and the .subscribe(...
What you're missing is either .valueChanges() or .snapshotChanges()... You can read about the differences at the AngularFire2 documentation here.
I typically use .valueChanges() most often, so for a quick example with .valueChanges() your code would be:
this._chatSubscription = this.db.list('/conversation').valueChanges().subscribe( data => {
this.messages = data;
);
EDIT - corrected code below. Not supposed to set a variable equal to the whole .subscribe... Define your pointer/listener, and then subscribe to it separately.
this._chatSubscription = this.db.list('/conversation').valueChanges()
this._chatSubscription.subscribe( data => {
this.messages = data;
);
2nd EDIT - after new error message that OP posted as answer.
That new error looks like it's due to version conflicts - check out this question with multiple possible solutions.
When you're getting the following error polyfills.js:3 Uncaught TypeError: Object(...) is not a function..., try the following code below:
this._chatSubscription = this.db.object('/conversation').valueChanges().subscribe(data => {
this.messages = data;
});

Angular - Data is loaded - Initial value of ID is NaN

On my web-app written in angular I am posting data to a Database and I am displaying this data in a table on the same html. Each data record has an ID. And every time I am adding new data, the ID is going to be increased. The first input field shows the actual ID, see the screenshot below:
In my ngOnInit-method I am initialising the id and I call the function fbGetData() in order to display the data.
But now I am facing one odd problem:
Everytime I starting the application the initial value which is displayed in the ID-field is NaN.
Obviously I cannot post any data to the database because the ID is not a number. So I have to switch to another page on my application and then switch back. After that the correct ID is displayed. I also tried to move my methods from the ngOnInit-method to the constructor but this didn't help.
Somehow I think that I need to implement the methods asynchronously, but I have no idea how to do this, since I am quite new to Angular/Typscript.
I hope you guys can help me with this problem or give me any hint or idea.
I appreciate your answers!
Here is my .ts Code:
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
import { Router, ActivatedRoute, Params } from '#angular/router';
import { DataService } from '../data.service';
import { Http } from '#angular/http';
import { rootRoute } from '#angular/router/src/router_module';
import { SearchNamePipe } from '../search-name.pipe';
import { LoginComponent } from '../login/login.component';
import {NavbarService} from '../navbar.service';
declare var firebase: any;
const d: Date = new Date();
#Component({
selector: 'app-business-function',
templateUrl: './business-function.component.html',
styleUrls: ['./business-function.component.css'],
encapsulation: ViewEncapsulation.None,
providers: [DataService, SearchNamePipe, LoginComponent]
})
export class BusinessFunctionComponent implements OnInit {
id;
name: String;
descr: String;
typ: String;
bprocess: String;
appsystem: String;
applications: String;
datum: String;
liste = [];
bprocessliste = [];
applicationliste = [];
appsystemliste = [];
isDesc: boolean = false;
column: String = 'Name';
direction: number;
loginName: String;
statusForm: Boolean = false;
private idlist = [];
constructor(
private dataService: DataService,
private router: Router,
private route: ActivatedRoute,
private searchName: SearchNamePipe,
private navbarService: NavbarService
) {
this.datum = Date().toString();
}
ngOnInit() {
this.navbarService.show();
firebase.database().ref().child('/AllID/').
on('child_added', (snapshot) => {
this.idlist.push(snapshot.val()
)})
this.id = this.idlist[0];
console.log("ID: "+this.id);
console.log("IDlist: "+this.idlist[0]);
this.id++;
console.log("ID: "+this.id);
this.fbGetData();
}
fbGetData() {
firebase.database().ref().child('/BFunctions/').orderByChild('CFlag').equalTo('active').
on('child_added', (snapshot) => {
//firebase.database().ref('/BFunctions/').orderByKey().on('child_added', (snapshot) => {
// alter code ... neuer Code nimmt nur die Validen mit dem X Flag
this.liste.push(snapshot.val())
});
// firebase.database().ref().child('/ID/').on('child_added', (snapshot) => {
//Bprocess DB Zugriff
firebase.database().ref().child('/BProcess/').orderByChild('CFlag').equalTo('active').
on('child_added', (snapshot) => {
this.bprocessliste.push(snapshot.val())
});
//Appsystem DB Zugriff
firebase.database().ref().child('/Appsystem/').orderByChild('CFlag').equalTo('active').
on('child_added', (snapshot) => {
this.applicationliste.push(snapshot.val())
})
//Application DB Zugriff
firebase.database().ref().child('/Application/').orderByChild('CFlag').equalTo('active').
on('child_added', (snapshot) => {
this.applicationliste.push(snapshot.val())
});
console.log(this.applicationliste);
}
You need to update the id inside your callback:
firebase.database().ref().child('/AllID/').on('child_added', (snapshot) => {
this.idlist.push(snapshot.val())
this.id = this.idlist[0];
console.log("ID: "+this.id);
console.log("IDlist: "+this.idlist[0]);
this.id++;
console.log("ID: "+this.id);
this.fbGetData();
})
Otherwise id retains it initial undefined value. This is because the call to firebase is asynchronous.
Here is what happens in your original code:
call to firebase API... wait your response
set id to this.idlist[0], which is empty (undefined)
...some time later, getting response from firebase
id does not get updated because the code in point 2. has already been executed.
Anything that you need to do when you get the result from an asynchronous call, must be executed inside the callback function.

Can't bind JSON results to Component variable

I'm trying a simple component that has to pull data from a JSON file. I'm almost copying the functionality from generated Fountain App, but for some reason I can't get the desired results. I have a component like:
import {Component, Inject} from "#angular/core";
import {Http} from '#angular/http';
#Component({
selector: 'body-selector',
template: require('./body.html')
})
#Inject(Http)
export class BodyComponent {
constructor(http: Http) {
this.http = http;
this.getText('app/texts/main.json').subscribe(result => {
console.log(result);
this.texts = result;
});
console.log(this.texts);
}
getText(url) {
return this.http.get(url).map(response => response.json());
}
}
on the first console.log I have [Object object] [Object object] [Object object], which is correct as I have three entries in the JSON. On the second however I've got undefined, which turns into an error in the browser.
Error in ./BodyComponent class BodyComponent - inline template:3:6 caused by: Cannot read property 'title' of undefined
I'm looking at the example generated from the fountain app, but I can't get what I'm doing wrong.
You have multiple problems:
The first console.log is inside the callback, where this.texts has just been set. However the second one is outside the callback, so it won't have been. Therefore you'll always see undefined for that, because...
...you never set a default value for this.texts, and your template apparently doesn't have any e.g. *ngIf to handle it being null or undefined, causing errors prior to the callback being called.
Below is your code, refactored to start with an empty this.texts (assuming it should be an array; please adapt to taste) and simplifying the injection of Http. Also note the comments, and that I've used templateUrl to avoid the require and OnInit to trigger the HTTP call slightly later in the component lifecycle rather than doing it in the constructor.
import {Component, OnInit} from '#angular/core'; // note consistent quotes
import {Http} from '#angular/http';
#Component({
selector: 'body-selector',
templateUrl: './body.html',
})
export class BodyComponent implements OnInit {
texts: any[] = []; // start with an empty array
constructor(private http: Http) { } // inject Http here, no need to assign to this
ngOnInit() {
this.http
.get('app/texts/main.json')
.map(response => response.json())
.subscribe(result => {
console.log(result); // only log *inside* the callback
this.texts = result;
});
// outside the callback, the HTTP call hasn't yet finished
}
}
You could also solve this by having an ngIf in your HTML to prevent the element from being loaded before the data is.
<div class="main-container" *ngIf="texts">
...
</div>
I'd strongly recommend running through the basic Angular 2 tutorials to get on top of this stuff, see e.g. the Tour of Heroes.
You get undefined because this:
this.getText('app/texts/main.json')
Is an asynchronous call that gets the data and when it's done, it executes the code in the 'subscribe' block. So this.text is empty until that executes. That is the expected behavior.
Better way to use data or making API call use service:
import { Injectable } from '#angular/core';
import { Http, Response, Headers, RequestOptions } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
#Injectable()
export class BodyService {
private _requestOptions: RequestOptions;
private static handleError(error: Response): ErrorObservable {
return Observable.throw(error.json().error || 'Server error');
}
constructor(private http: Http) {
const headers = new Headers({ 'Accept': 'application/json' });
this._requestOptions = new RequestOptions({ headers: headers});
}
/**
* [getJsonData will get data of json file: main.json ]
*/
getJsonData() {
return this.http.get('app/texts/main.json', this._requestOptions)
.map(res => res.json()) //needs to add map for converting data in json format
.catch(BodyService.handleError);
}
}
Now Inject this service in your component:
import {Component, OnInit} from '#angular/core';
import { BodyService } from './adminModules.service';
#Component({
selector: 'body-selector',
templateUrl: './body.html',
providers: [BodyService]
})
export class BodyComponent implements OnInit {
texts: any = []; // start with an empty array
errorMessage: any;
constructor(private _bodyService: BodyService) {}
ngOnInit() {
this._bodyService.getJsonData()
.subscribe(data => {
this.texts = data;
console.log('data', this.texts);
}, error => {
this.errorMessage = <any> error;
})
}
}
For calling service, you can call directly in constructor or create one method and call either in constructor or any place where you want to call.
Hope it will helpful for you :)

Categories

Resources