What should I do about typescript and ES6?

An error occurred while running my code:

[0] app/components/people/details/PersonDetailComponent.ts(27,35): error TS2339: Property 'person' is missing from type '{}'.

Here is the code snippet in question:

   export class PersonDetailComponent
   {
    person: any;

    constructor(private _api: Api, private _params: RouteParams)
    {
        this._api.getPerson(_params.get("id")).then(
            (res) => {
     //line 27//     this.person = res.person;
            },
            (error) => {
                console.error(error);
            }
         )
      }
   }

Answer №1

It seems like there is a type issue here. Typescript is mistakenly identifying res as type {}, resulting in an error message about pessoa not existing on the type.

To resolve this, you can make use of:

(res: any) => {
  this.pessoa = res.pessoa;
},

Alternatively, if you are aware of the correct type, you can specify it explicitly.

Answer №2

Attempting to chain methods on a promise within a constructor is not recommended. The instance of this may become corrupted as a result of the promise.

constructor(private _api: Api, private _params: RouteParams)
{
    this.person = this._api.getPerson(_params.get("id"));
}
//Whenever you need to access the person property, make sure to use this.person.then()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to resolve a CSS problem in an Angular Web Component within a React Application?

I recently integrated an Angular Web Component with some widgets from Angular Material UI into my simple React Application. While the functionality of the buttons, tables, and radio buttons is working perfectly fine, I am facing issues with the styling and ...

Angular: ensure the form reverts to its initial value when the modal is closed and reopened

I am facing an issue with my items section. When I click on an item, a modal window opens allowing me to edit the text inside a textarea. However, if I make changes to the text and then cancel or close the modal, upon reopening it, the previously modified ...

How can you verify the anticipated log output in the midst of a function execution with Jest unit testing?

Below is a demonstration function I have: export async function myHandler( param1: string, param2: string, req: Request, next: NextFunction, ) { const log = req.log.prefix(`[my=prefix]`); let res; If (param1 === 'param1&a ...

Angular7 & Electron: Resolving the Issue of Loading Local Resources

I am encountering difficulties while working with electron. Although I can successfully load my project using ng serve, I encounter an error when attempting to open it with electron as shown in the developer tools Not allowed to load local resource: fil ...

Does Nativescript successfully utilize AOT Compilation even with the `Compiler` package still included?

I'm running this command: npm run ns-bundle --android --build-app --uglify The command is successful (you can find the complete log here). After navigating to the report folder (generated by webpack-bundle-size-analyzer), I found these two files: ...

The command "tsc" was not found in this bash session

Currently, I am using a MAC and attempting to set up TypeScript. I followed the installation process by running sudo npm install -g typescript and received the following output: Password: /Users/<myuserid>/node/bin/tsc -> /Users/<myuserid& ...

There seems to be no clear reason as to why the Angular Service is showing

In my DataService component, I have defined two methods - one to read from a file using the cordova-file-plugin and the other to write to it. Initially, it was using the in-mem-web-api, which worked perfectly fine. However, I made some changes to switch th ...

Trouble with parsing JSON in rxjs ajax response

Currently, I am facing an issue while parsing a JSON string within an ajax callback in Angular2. After executing response.json()) and using console.log(), everything seems to be functioning correctly. This is the specific JSON data that I am attempting ...

Ways to activate Form Validators in angular2?

I recently developed an Angular2 web application and successfully integrated a custom validator using the form builder. Although it works when the form is submitted, I am facing difficulties in triggering validation dynamically based on changes in other fo ...

Modifying app aesthetics on-the-fly in Angular

I am currently working on implementing various color schemes to customize our app, and I want Angular to dynamically apply one based on user preferences. In our scenario, the UI will be accessed by multiple clients, each with their own preferred color sch ...

What is the best way to extend a class in NestJS from another class?

I've encountered an issue while attempting to extend a class service from another class service in NestJS and utilize DI to load it in a third service. The error message I'm receiving from Nest is: Error: Nest can't resolve dependencies of ...

Retrieving updated data from a service does not trigger a refresh of the view

Having an issue with rendering data obtained from a service. Here is the situation: The service retrieves values from a distant API using an Observable: @Injectable() export class myService { constructor(private http: Http) { } getData(listLength: num ...

displaying an item within a text field

I have an input box created using Angular reactive forms <input type="text" formControlName="OrgName" placeholder="Enter name" maxlength="60"> <p class="fieldRequired" *ngIf="showNameMSg" ...

Strategies for integrating this into an HTML template

I am currently learning Ionic 3 and I am looking to implement the select option functionality using HTML. I have already set up an ion-select component using a .ts file, but now I want to do it using HTML. The select option I have in mind is for dates, sp ...

Unable to reach the exposed port of the container

I am having difficulty accessing an Angular application that I have deployed within a container. Despite exposing the port in my Dockerfile and mapping the port in the docker-compose file, I still cannot access it from my web browser (Mozilla). There are ...

What is the best way to convert the NextJS router.query.id to a string?

As a newcomer to TypeScript and the T3 stack (React Query / Tanstack Query), I am facing an issue with typing companyId as string. I want to avoid having to type companyId as string every time I use it in my code, but I'm struggling to find the best p ...

`MongoDb aggregation performance degradation with numerous collections (join)`

I am currently working on a project using the MEAN stack and I have noticed that I am utilizing a significant number of collections in my aggregation, resulting in a heavy reliance on lookup. This has had a negative impact on performance, causing the execu ...

The concept of inheriting directives/scopes

Just wondering if directives declared within a Component in Angular 2 automatically apply to its children Components. And when it comes to variables declared on the Component, do they get inherited by the children Components or must they be explicitly pa ...

Why Does Angular's ngIf Always Result in a Negation to True?

Can someone please clarify this for me? I'm having trouble understanding why the *ngIf condition and else statement always evaluate to true unless I am completely mistaken. Here is the situation: I have an icon that should turn the background color t ...

React: Retrieved information, yet unable to access the properties of the object

After successfully fetching data from an API call and seeing the results in console, I am facing issues with accessing object properties and displaying them. interface Data { data: [] isLoading: boolean } function About() { const [ dataUser, ...