无法从rxjs观察到数据

Question

我有一项提供可观察到的“食谱”的服务

@Injectable({
  providedIn: 'root'
})
export class RecipeService {

  recipes: Recipe[];
  private _recipesSource = new Subject<Recipe[]>();
  recipesMessage$ = this._recipesSource.asObservable();

  constructor() {
    this.recipes = new Array<Recipe>();
    this.recipes.push(new Recipe('Recipe1', 1));
    this.recipes.push(new Recipe('Recipe2', 2));
    this.recipes.push(new Recipe('Recipe3', 3));
    this._recipesSource.next(this.recipes);
  }
}

此外，我还有一个角度组件，可为RecipeService中的每个配方创建垂直的按钮列表

@Component({
  selector: 'app-recipe-list',
  template: `
    <div class="btn-group-vertical">
      <button
        *ngFor="let recipe of rs.recipesMessage$ | async"
        type="button" class="btn btn-secondary">
        a
      </button>
   </div>
  `
})
export class RecipeListComponent implements OnInit {

  recipes: Recipe[];
  constructor(private rs: RecipeService) { }

  ngOnInit(): void {
    this.recipes = new Array();
  } 
}

我遇到的问题是，在提供页面时按钮没有出现。看来我的订阅没有返回任何内容。

ps。如果我的TypeScript不好，请原谅我。我是Java语言世界的新手，欢迎您提供反馈。

Answer 1

这是因为recipes更改没有被角度更改检测捕获，因为它在aync订阅调用中发生了更改。

替换

*ngFor="let recipe of recipes"