The solution to enabling Type checking in this scenario is simple: Begin by addressing the issue of "Not assignable," followed by resolving any

After subscribing to an observable projected by a BehaviorSubject from a service, I encountered the following errors when trying to assign the subscribed value to a local variable:

error TS2322: Type '{}' is not assignable to type 'DatosAdmin'.
and
error TS2739: Type '{}' is missing the following properties from type 'DatosAdmin': nombre, nombreCorto

I attempted to define the local variable as `localVariable: Observable`, but this did not resolve the issue.

When I use console.log() to check the subscribed data, it displays the same structure as defined in my Interface: {nombre: 'someName', nombreCorto: "SN"}.

In the file final.component.ts, the line this.datosAdmin generates an error message.

export class InternadoFinalComponent implements OnInit {
  datosAdmin: DatosAdmin;
  constructor(private intF: InternadoFormService) {}

  ngOnInit() {
    this.intF.adminAcumul$.subscribe(datos => (this.datosAdmin = datos));
  }
}

interface.ts

export interface DatosAdmin {
  nombre: String;
  nombreCorto: String;
}

datos.service.ts

private adminAcumul = new BehaviourSubject({})
public adminAcumul$ = this.adminAcumul.asObservable();
adminNext(datosAdmin: DatosAdmin){
  this.adminAcumul.next(datosAdmin);
}

Answer №1

As I was formulating the question, the solution suddenly became clear to me.

Instead of using an interface, I opted to define a class and specify the _value in the BehaviourSubject.

interface.ts

export class DataAdmin {
  name: String,
  shortName: String
}

and data.service.ts

private adminTotal = new BehaviourSubject(new DataAdmin);

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

Inquiring about Vue 3 with TypeScript and Enhancing Types for Compatibility with Plugins

I've been struggling to find a working example of how to implement type augmentation with Vue3 and TypeScript. I have searched for hours without success, trying to adapt the Vue2 documentation for Vue3. It appears that the Vue object in the vue-class ...

Having difficulty properly streaming UI components with Vercel's AI-SDK

Recently, I've been diving into the new Vercel's AI-SDK to expand my skills. My current project involves developing a persona generator that takes specific guidelines as inputs and generates persona attributes according to a given Zod schema. B ...

What steps can I take to ensure the footer remains fixed at the bottom of the webpage?

I am facing a challenge with my footer component as it is currently being displayed at the end of another component. I want to ensure that it remains anchored at the bottom of the page regardless of the other components present. In addition to the footer ...

Preserving variable values across page transitions in Angular 2

I am facing an issue with my multi-page website that uses a router. I want to pass a variable value from one page to another. Here is the code snippet from my contact form page: testName:string = "hello"; ngOnInit() { this.dataService.Stream ...

Display different icons in an Angular application based on the value received from an API in real

My goal was to create a dynamic form that displays icons for the fields I have created. Here is a snapshot of my UI screen showing the field explorer with the list coming from an API. https://i.sstatic.net/4Ye9G.png I need to place an icon in front of ea ...

Checkbox selections persist when navigating between pages

I am currently working with Angular 9 and I have a list of checkboxes that need to default to true when displaying certain data. If one of these checkboxes is unchecked, it should trigger the display of specific information. The issue I am facing is that o ...

Angular: Object contains data, but its properties have not been defined

I am encountering an issue while trying to access properties of the Dto object filled from my rest service, as they are coming up undefined. Firstly, I fetch the data: this.mapservice.getAllCoordinates().subscribe((data: CoordinateDto[]) => { this.co ...

Receiving undefined when subscribing data to an observable in Angular

Currently, I am facing an issue in my Angular project where subscribing the data to an observable is returning undefined. I have a service method in place that retrieves data from an HTTP request. public fetchData(): Observable<Data[]> { const url = ...

Angular 2 tool for transforming Excel files into JSON format

I am looking for a way to read and convert XLSX files into JSON using Angular 2. Here is the code I am currently using: readFile(){</p> <pre><code>var testUrl= "../assets/US175939.xlsx"; var oReq = new XMLHttpRequest(); oReq.open("GET", ...

How can you navigate to a particular page within a Single Page Application using NodeNS?

My NodeJS server is hosting a single page application that was built using Angular5. In certain circumstances, I need to direct users to a specific page within the application. For instance, during a designated time period, I want users to be redirected t ...

What is the best way to modify an existing object in an Observable Array in Angular?

As I work on my Ionic 5 / Angular application, a challenge arises when attempting to update a Conversation object within the existing array of Conversation: private _conversations = new BehaviorSubject<Conversation[]>([ new Conversation( & ...

What is the best way to find the average time in Typescript?

I am dealing with an object that contains the following properties: numberOfReturns: number = 0; returns_explanations: string [] = []; departure_time: string = ''; arrival_time: string = ''; The departure_time property hold ...

What are the benefits of incorporating component A into component B as a regular practice?

I am considering creating an instance of Component A within Component B, but I'm unsure if this is a best practice in Angular or if it will just cause confusion. Component A: This component generates a modal window asking the user to confirm file de ...

Issues with Vercel's JavaScript Environment Variables Accessibility

I am encountering an issue trying to access environment variables on Vercel using JavaScript (TypeScript). Despite setting them under /settings/environment-variables, I receive undefined when attempting to access them with process.env.TURSO_DATABASE_URL du ...

Differentiating Between Observables and Callbacks

Although I have experience in Javascript, my knowledge of Angular 2 and Observables is limited. While researching Observables, I noticed similarities to callbacks but couldn't find any direct comparisons between the two. Google provided insights into ...

Add photos to a Google Cloud bucket through an Angular 7 application

Can anyone help me figure out how to upload an image to a Google Cloud bucket within an Angular 7 app that doesn't utilize Node.js as the backend, but instead uses Firebase as a backend service? I've searched for guides and documentation but have ...

Experiencing a "HEROES not found" error while following an Angular guide

I've been diving into Angular with the tutorial provided on https://angular.io. However, I've hit a roadblock at step 4. Displaying a list where I'm encountering an error in HeroesComponent. Cannot find name 'HEROES' The cod ...

Issue: Failed to Render: Error encountered during parsing of template: Element 'mat-checkbox' is not recognized as a valid element

For the purpose of testing my component, I wrote the following code snippet: describe('Component: TestComponent', () => { let component: TestComponent; let fixture: ComponentFixture<TestComponent>; beforeEac ...

Navigate back to the main page using a tab

Is there a way to navigate back to the rootPage that is defined in the appComponent when using tabs? I have found that the setRoot method does not function as I anticipated. When used on a Tab page, the navigation stack is not cleared. Instead of the navig ...

Authentication of users using NextJS Dashboard App API

I am currently following this tutorial, but instead of fetching data via a PostgreSQL request, I want to utilize an API. When I call an async function with await, it initially returns undefined and then the user object after receiving a response from the ...