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

Enhancing Readability of Public Static Member Variables in Typescript

In my node application, I am utilizing typescript and winston for logging purposes. One key element of my setup is the "Logger" class which consists of a "logger" member and an "init()" function. By exporting this class, I understand that the "logger" memb ...

The magical form component in React using TypeScript with the powerful react-final-form

My goal is to develop a 3-step form using react-final-form with TypeScript in React.js. I found inspiration from codesandbox, but I am encountering an issue with the const static Page. I am struggling to convert it to TypeScript and honestly, I don't ...

Tips on extracting value from a pending promise in a mongoose model when using model.findOne()

I am facing an issue: I am unable to resolve a promise when needed. The queries are executed correctly with this code snippet. I am using NestJs for this project and need it to return a user object. Here is what I have tried so far: private async findUserB ...

Are the Angular2 Material components able to work with previous versions?

For instance, I am currently utilizing Angular2 Material version 5.0.0-rc0. Suddenly, the 5.0.0-rc1 has been released with bug fixes that are essential for me. Is it safe to upgrade the component using npm install --save @angular/material@latest @angula ...

Oops! Looks like there was an issue finding a matching route for the URL segment in Angular 2

I am currently exploring angular2 and trying to figure out how to incorporate multiple <router-outlets> in a specific template. Despite searching through numerous Q&A, I have been unable to resolve the issue. router.module.ts const routes: Routes = ...

Downloading Files in Angular Using HttpClient - Extracting File Names from the Server Response

I am currently working on retrieving a File from an API URL. My goal is to display this uploaded file in an input field along with its name. To achieve this, I have implemented the following service function: getDocument(): Observable<Blob> { c ...

Step-by-step guide on building a wrapper child component for a React navigator

When using the Tab.Navigator component, it is important to note that only the Tab.Screen component can be a direct child component. Is there a way in Typescript to convert or cast the Tab.Screen Type to the TabButton function? const App = () => { retur ...

Subject.next() not triggering Observable on value change

I'm currently working on developing an autocomplete feature using Observable and Subject in Angular. However, I've run into an issue where the service method is not triggered when the Subject object's value changes. Below is a snippet of my ...

What is the recommended data type for the component prop of a Vuelidate field?

I'm currently working on a view that requires validation for certain fields. My main challenge is figuring out how to pass a prop to an InputValidationWrapper Component using something like v$.[keyField], but I'm unsure about the type to set for ...

"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

I am currently developing an application using Angular. I have been attempting to upload a picture to my S3 bucket, but each time I try, I encounter this error in the console. https://i.stack.imgur.com/qn3AD.png Below is the code snippet from my upload.s ...

What is the best approach to implement runtime configuration in Angular 15, ensuring that values can be provided in AppModule imports as well?

After two days of brainstorming, I am still struggling to figure out a way to read a config.json file located in my assets folder. I attempted to read this file during the bootstrapping process in main.ts so that I could use the values in my AppModule lik ...

How do I customize the alert in ion-select using IONIC ANGULAR?

How can I create a select element like this: Is it possible to customize the selected item? I'm new to working with Ionic. I've tried using custom properties, but they don't seem to work as expected. I also attempted a fake select by using ...

Steps for setting up an auth guard:1. Define a

I am facing an issue with implementing two guards in my Angular application. The first guard is supposed to restrict unauthorized users from accessing certain pages, while the second guard is meant to prevent authorized users from accessing the "sign-in" a ...

Uploading Multiple Files to a REST API Using Angular 6's Reactive Form

Looking to create a file uploader in Angular 6 using a reactive form. Once all files are selected, there will be an upload button to start uploading the files. The issue I'm facing is that I can't access all the files from the component without u ...

What is the process for exporting a plugin from dayjs() in JavaScript?

Currently, I have incorporated the plugin isToday() to enhance the capabilities of dayjs(). Nevertheless, I am uncertain about how to export isToday() in order to utilize it across other files. import isToday from "dayjs/plugin/isToday"; expor ...

`Is there a way to resolve the getStaticProps type issue in Next.js while utilizing InferGetStaticPropsType?`

I'm puzzled by an error that occurred with post props. The error message reads as follows: Property 'body' does not exist on type 'never'. https://i.stack.imgur.com/zYlxc.png Even when I specify the type, can there still be an er ...

Name the Angular interpolation function with the (click) event

I have a JSON file that defines different dynamic buttons, but when I click on them, the function is not being called. Here's how my JSON file looks: export const liveButtonData = [ { title: 'My Name', function: 'getName()'} ...

Tips for streamlining the transfer of essential features from a main project to its duplicate projects

In my Angular project, I have a core repository on GitHub that serves as the foundation for custom client projects. Each time a new client comes onboard, we create a clone of the core project and make customizations based on their requirements. The issue ...

Having difficulty grasping the concept of a component in Angular that utilizes a service which incorporates the HttpModule

I just started learning Angular and I'm grappling with a testing issue. After studying how the framework functions, I noticed that a component using a service which incorporates HttpModule requires the HttpModule to be imported in the component test ...

Having trouble getting your custom Angular directive to work properly with interpolation?

One of the custom Angular directives I have developed accepts a couple of inputs. Its main purpose is to highlight the matching parts of the element to which the directive is attached with the input matchTerm. This directive is intended to be used with a t ...