The provided array cannot be assigned to type InternalTransfert[]

When calling the getInternalTransfert() method, it is necessary to fetch and display the contents of the svm variable.

Unfortunately, an error message occurred at the following line:

this.internalTransfertLines = res.TITRE.map(
  ...
The type '{ svm: number; }[]' cannot be assigned to type 'InternalTransfert[]'.
The object '{ svm: number; }' does not have the required properties such as isin, stock, label, place, among others. (ts(2322))

View error message

TS

export class InternalTransfertWatchComponent implements OnInit, OnDestroy {
    private unsubscribe$ = new Subject < void > ();
    internalTransfertLines: InternalTransfert[] = [];

    constructor(private service: InternalTransfertWatchService) {}


    ngOnInit(): void {}

    ngOnDestroy(): void {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }


    getInternalTransfert(): void {
        this.service.getInternalTransfert().pipe(
            takeUntil(this.unsubscribe$)
        ).subscribe(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
                this.internalTransfertLines = res.TITRE.map(
                    internalTransfertLine => {
                        return {
                            svm: internalTransfertLine.SVM,
                        }
                    }
                );
            }
        });
    }

}

internal-transfert.response.ts

export interface InternalTransfertResponse extends ApiResponse {
    TITRE: {
        SVM: number;
        ISIN: string;
        STOCK: string;
        LABEL: string;
        PLACE: number;
        PLACELABEL: string;
        REGR: number;
        REGLABEL: string;
        DEVISE: string;
    } [];
}

internal-transfert.ts

export interface InternalTransfert {
    svm: number;
    isin: string;
    stock: string; 
    label: string;
    place: number;
    placelabel: string;
    regr: number;
    reglabel: string;
    devise: string 
}

Appreciate any assistance provided

Answer №1

It's quite clear from the error message that there are mandatory fields left unfilled. In the user interface, all fields must be filled out:

export interface InternalTransfert {
    svm: number;
    isin: string;
    stock: string; 
    label: string;
    place: number;
    placelabel: string;
    regr: number;
    reglabel: string;
    devise: string 
}

Therefore, providing only the svm property and neglecting the rest is not valid. The error prompts you to complete the other fields such as isin, stock, etc.

You have two options to address this issue:

  1. If the fields are not strictly required, you can mark them as optional in the interface like so:
export interface InternalTransfert {
    svm?: number;
    isin?: string;
    stock?: string; 
    label?: string;
    place?: number;
    placelabel?: string;
    regr?: number;
    reglabel?: string;
    devise?: string 
}
  1. If the fields are meant to be mandatory but you are okay with leaving them empty, you can specify internalTransfertLines as Partial<InternalTransfert>[]:
internalTransfertLines: Partial<InternalTransfert>[] = [];

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

Angular 4 - Seeking clarification on the usage of *ngComponentOutlet

When using *ngComponentOutlet, the following code snippets are employed to handle the displaying: Below is a snippet of functional code: this.displayComponent({ 'objects':[ {component: ToDisplayAComponent, expanded: fals ...

Handling routerLink exceptions in Angular 2, 4, and 5

In my app, I am working on catching routing exceptions. There are three ways in which a user can navigate: If the user types the address directly - this can be caught easily by using { path: '**', redirectTo: 'errorPage'} in the route ...

Discovering the type in Typescript by specifying a function parameter to an Interface

Consider this sample interface: interface MyInterface { x: AnotherThing; y: AnotherThingElse; } Suppose we make the following call: const obj: MyInterface = { x: {...}, y: {...}, } const fetchValue = (property: keyof MyInterface) => { ...

The parameter of type 'void' cannot be assigned to the parameter of type 'PathParams'

Established the route handler and encountered an issue while integrating it into my route. import {Application, NextFunction} from 'express'; import {container} from 'tsyringe'; const routeConstantsArray = { }; const constants: any ...

What are the steps to resolve the MSB4132 error in MSBUILD on a Windows 10 system?

Currently working on an Angular 2 project while using Windows 10. When I ran npm install, I encountered this error message: MSBUILD : error MSB4132 MSBUILD : error MSB4132: The tools version "2.0" is unrecognized. The available tools versions are "12. ...

How can you display a loading indicator after a delay using Observables, but make sure to cancel it if the loading is completed

Within my customer-detail component, I have implemented code that achieves the desired outcome. However, I believe there might be a more reactive and observable way to approach this task. Instead of using an if statement to set this.isLoading = true;, is ...

The Maven build encountered an error while trying to execute a goal, resulting in the inability to

I'm currently working on a Windows 7 computer and I've received some code that requires me to execute "mvn install" in order to build the application. However, when I try to run this command, I encounter the following error: Failed to execute ...

Having Trouble with Angular2: Nesting a Child Component?

Working with angular 2 has been a fun experience for me over the past few days. I've been attempting to insert a child selector into a parent template, but it seems more challenging than I expected. Every time I try, I encounter the following error: ...

Including a Javascript library (jsencrypt) in an Angular 2 application

I have gone through countless tutorials on this particular issue, but unfortunately, I have not yet found a solution. Let me provide some context first. I am working on an Angular 2 application and I need to incorporate this JS library for encryption: http ...

Tips for locating precise information within nested object formations using Javascript

Within my code, I have showcased two distinct types of response. Upon closer examination of the following code snippets, it becomes evident that the structure of the response from a service differs slightly between the two types. In the first type, there i ...

Placing gaps after every group of four digits

I am currently working with Ionic 4 and Angular 8, attempting to insert a space every 4 digits entered by the user. However, the function I have written seems to be malfunctioning, as it inserts a space after each action the user takes following 4 numbers. ...

Authentication with API Tokens in Rails 5

I am currently developing an API using rails 5 and I am looking to implement token authentication for consumption with angular 2 as the frontend. After installing devise, I found that most tutorials use devise_token_auth for this purpose. Can someone clari ...

Securely connecting Angular front end with NodeJS backend server using HTTPS encryption

I am currently using a frontend built with Angular 7 and ngx-admin, along with a backend developed in nodeJS and Express. The issue: The Angular frontend uses HTTPS to communicate with the backend via HTTP. This has caused the following problem: Mixed Co ...

Unlocking the power of variables in Next.js inline sass styles

Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...

Generating Angular2 CLI components with Angular-Meteor integration

Exploring Angular2 CLI and Meteor has been an interesting journey for me. One thing I've noticed is that when I create a component using Angular2 CLI, integrating it into another module is as simple as including it in the declarations array of that mo ...

Click event to verify, delete, and include class identifier in angular13

Looking to enhance functionality by dynamically adding and removing the 'active' class to 'li a' elements on click. While the current code performs well when clicking from top to bottom, it fails to work in reverse order. component.htm ...

Typescript: Maximizing efficiency and accuracy

When it comes to developing Angular2 apps using Typescript, what are the essential best practices that we should adhere to? ...

A guide to accessing a property value in Angular 6 from an object using a string key

In my Angular application, I am receiving an object with multiple arrays from a REST service. I need to access the value from the incoming object based on the property name. Here is what the object looks like: data{ array1:{}, array2:{}, array3:{} } Th ...

Angular 7: Retrieve the most recent subscription response from an array of observables

Scenario: I am handling multiple POST requests to update a single table with diverse data sets. The response from the request will contain the updated table data. To streamline this process, I stored the observables in an array and employed forkJoin to co ...

The "number" input type is functioning correctly on Chrome, but on Firefox, it is accepting characters other than numbers

While developing in Angular, I encountered a challenge where I needed to create an input that only accepts numeric characters. Initially, I tried using type="number" which worked perfectly in Google Chrome but surprisingly allowed non-numeric characters ...