After calling this function to retrieve an array of Articles, I noticed that the data is not being saved as expected. Take a look at my console output below.
GetAll() {
//return this.http.get<Array<Article>>(this.cfg.SERVER);
this.http.get(this.cfg.SERVER)
.subscribe((data: Array<Article>) => {
this.articles = data;
console.log(1);
console.log(this.articles);
}
);
console.log(2);
console.log(this.articles);
return this.articles;
}
View Console Output
Your solution was spot on with the commented code. Simply return the Observable that is provided by the http call. The current implementation of the GetAll() method will always result in null being returned because it exits before the callback in subscribe is executed.
Here is a suggested modification:
GetAll(): Observable<Array<Article>> {
return this.http.get<Array<Article>>(this.cfg.SERVER);
}
If the variable that stores the result of this method has a specified type, make sure to update its type to
Observable<Array<Article>>Another approach you could experiment with is shown below.
for(let index = 0; index < this.articles.length; index++)
{
console.log("ID:" + this.articles[index].id + " Title: " + this.articles[index].title");
}
I am facing an issue with my Ionic 4 (4.10.2 with Angular 7.3.1) app where I want to make it accessible only after login. Following a tutorial from , I encountered a problem when trying to access the ion-tabs section of my app. Chrome keeps showing this er ...
Here is an element I'm working with: <div (mouseenter)="enter()" (mouseleave)="leave()">Title</div> In my TypeScript file: onHover = false; enter() { this.onHover = true; // additional functionality... } leav ...
Is it possible to modify the field of a component instance? Let's consider an example in test.component.ts: @Component({ selector: 'test', }) export class TestComponent { @Input() temp; temp2; constructor(arg) { ...
I developed a custom interceptor that displays a spinner whenever an HTTP request is initiated: import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; import { Injectable } from '@angular/core'; im ...
I am facing an issue with a class containing an overloaded method that has two versions. One version does not take any arguments, while the second one can take two arguments. class DFD { ... getEndDatetime(): string; getEndDatetime(startTime?: ...
I have a TypeScript library on GitHub that I want to install using npm install --save git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f38362b1d15c3f4">[email protected]</a>:User/mylib.git into my targ ...
I've been encountering some issues while trying to bind data from an input in Angular 2. Below is the HTML code snippet: <input type="text" class="animated bounceIn input-proposta" placeholder="Enter your proposal" [(ngModel)]="propo ...
Resolved I think my solution is temporarily fixed and it reveals that I may have set up my mongoose model incorrectly. The answer provided did assist me in solving my issue, but ultimately the reason for the empty data rows was due to incorrect identifier ...
I am facing an issue where I am trying to retrieve a value from the localStorage and assign it to a variable. However, when I try to use that variable in functions, it is coming up as undefined. code export class DashboardService { public token: any; ...
Whenever I apply the font-weight bold in jspdf, it seems to cause the text to lose its spacing. You can compare the before and after images below which were extracted from the pdf file generated: https://i.stack.imgur.com/0BPWP.png Below is the code snipp ...
In my directive, I have configured a table value to be replaced by an anchor tag using the renderer.setProperty method. The anchor tag is enhanced with a "click" attribute that I am unsure how to interact with: either through accessing the function "onCli ...
Imagine having an Angular reactive form with an input field. The goal is to keep track of the old value whenever the input changes and display it somewhere on the page. Below is a code snippet that achieves this functionality: @Component({ selector: & ...
After updating my Angular to version 9, I encountered an error when trying to revert back to version 8. Despite attempting the following solutions: Uninstall -global angular/cli Uninstall angular/cli Revert back to my previous package.json Delete node_mo ...
I encountered an issue in my Angular CLI that says: jest.config.js is part of the TypeScript compilation but it's unused. Add only entry points to the 'files' or 'include' properties in your tsconfig. Additionally, I have a few o ...
I am encountering an issue while trying to subscribe to an Observable and assign data from the response. The problem is that my code does not wait for the response before executing the console.log(this.newIds) line, resulting in an empty value being logg ...
Before we proceed, I want to clarify that my question is not a duplicate of ES6 double destructure Let's examine the code snippet related to Apollo Client GraphQL: import { gql, useQuery, useMutation } from '@apollo/client'; ... const { loa ...
It seems like a straightforward code. However, I am encountering the error cannot find module '@angular/core'. course.component.ts import {Component} from '@angular/core' @Component({ selector: 'courses' }) export clas ...
Is there a way to directly return a result from the service without returning Observable and then using then clause? I've experimented with methods like pipe, of, take, toPromise, map, async-await, but none of them seem to return the result on a servi ...
Recently, I attempted to troubleshoot the TypeScript Express App located at https://github.com/schul-cloud/node-notification-service/ using Visual Studio Code. Within the launch.json file, I included the following configuration: { "name": "notifi ...
How can I use JavaScript/TypeScript to prompt the browser to open the download window? My goal is to give users the ability to rename the file and select the download folder, as most downloads are saved directly in the default location. This is how I curr ...