使用Observable映射字符串数组并赋值给Input的问题修复

核心错误原因 #

1. 类型不匹配：subscribe()方法返回的是Subscription对象，而非Observable，你将其赋值给声明为Observable<any[]>的slider$，导致类型校验失败，触发报错。
2. 模板解析失败：由于slider$实际是Subscription，async管道无法识别处理，Angular直接渲染了未解析的模板字符串{{ slider$ | async }}。

修复步骤 #

1. 修正Observable赋值错误 #

将subscribe()与Observable的创建分离，slider$仅保留Observable引用，单独调用subscribe()处理日志打印：

import { of, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

const slides = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];
let slider$: Observable<string[]>;

// 仅赋值Observable，不包含subscribe
slider$ = of(slides).pipe(map(response => response));
// 单独调用subscribe打印日志
slider$.subscribe(console.log);

2. 处理input显示逻辑 #

如果需要显示数组中的单个元素（例如第一个），修改HTML模板：

<input type="text" value="{{ (slider$ | async)[0] }}" />

如果需要实现轮播遍历数组元素（每隔几秒切换输入框内容），调整TS代码实现定时切换：

import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';

const slides = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];
let slider$: Observable<string>;

// 每2秒切换一个元素，循环遍历数组
slider$ = interval(2000).pipe(
  map(index => slides[index % slides.length])
);

slider$.subscribe(console.log);

对应的HTML模板：

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

内容的提问来源于stack exchange，提问作者hecticplalalatypous