Creating a String Array and linking it to an Input Field

Question

Creating a String Array and linking it to an Input Field

I'm currently working on a code that involves mapping through an array of strings using observables. My objective is to display the value from this array inside an input field. However, despite being able to view the array in the console, I encountered difficulties when attempting to assign it to the input field. The error message

Type 'Subscription' is missing the following properties from type 'Observable<any[]>': source, operator, lift, subscribe, and 3 more.

was also displayed. Instead of seeing the array element within the input field, all I could see was {{ slider$ | async }}. What steps should I take to rectify this issue?

HTML:

<input type="input" value="{{ slider$ | async }}" />

TS:

const slides = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];
let slider$: Observable<any[]>;
slider$ = of(slides).pipe(map((response) => {return response;})).subscribe(console.log);

javascript angular typescript rxjs observable

Answer 1

Answer №1

Check out the code on Example

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
    <input type="input" value="{{ slider$ | async }}" />
  `,
})
export class AppComponent {
  slides: string[] = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];

  slider$: Observable<string> = of(this.slides).pipe(
    tap(console.log), // ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4']
    map((arr: string[]) => {
      return arr[0]; // take the first element of the array
    }),
    tap(console.log) // output: 'Slide 1'
  );
}

Using {{ slider$ | async }} in the template automatically subscribes and unsubscribes to the observable slider$. If you directly subscribe in your code, it will create a Subscription object instead of an Observable, leading to errors. To debug during the stream, use the tap operator for side effects.

Answer 2

Check out the code on Example

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
    <input type="input" value="{{ slider$ | async }}" />
  `,
})
export class AppComponent {
  slides: string[] = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];

  slider$: Observable<string> = of(this.slides).pipe(
    tap(console.log), // ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4']
    map((arr: string[]) => {
      return arr[0]; // take the first element of the array
    }),
    tap(console.log) // output: 'Slide 1'
  );
}

Using {{ slider$ | async }} in the template automatically subscribes and unsubscribes to the observable slider$. If you directly subscribe in your code, it will create a Subscription object instead of an Observable, leading to errors. To debug during the stream, use the tap operator for side effects.

Creating a String Array and linking it to an Input Field

Answer №1

Similar questions

JavaScript code that deletes text from a document - Script eradication

The click method in the Angular unit test does not seem to be executing successfully

HTML not updating after a change in properties

Guide on how to implement user authentication using React hooks and react-router

JavaScript Object DeclarationCreating Objects in JavaScript

JavaScript Automation Script for QuickTime Screen Recording

WordPress display issue: AMCharts chart won't appear

Guide to sending jQuery data back to main class in TypeScript

Displaying HTML content in Angular 15

Property ngIf in Angular is not being supplied by any relevant directive within the embedded template

Jquery code failing to trigger any response

Having trouble importing font-face in scss

What is the best way to first identify and listen for changes in a form

"Utilizing Angular's $http.post to extract data from resolved promises

The functionality of core-ui-select is not functioning properly following the adjustment of the

Calling Node Express request inside a GET route

Adjust the map automatically as the cursor approaches the map's edge in Google Maps API V3

Change Node.js version to 6.11.5 on a Windows system

What methods does Angular use to differentiate between router-outlet tags that are located in various components?

How can I dynamically apply an active class when clicking on a group of buttons?