Невозможно получить данные из rx js, наблюдаемого

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);
  }
}

Кроме того, у меня есть компонент angular, который создает вертикальный список кнопок для каждого рецепта из 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();
  } 
}

Проблема, с которой я сталкиваюсь, заключается в том, что кнопки не отображаются при показе страницы. Похоже, моя подписка ничего не возвращает.

пс. Простите, если мой TypeScript не великолепен. Я новичок во вселенной Javascript, и отзывы всегда приветствуются.

Answer 1

Это не работает, потому что вы используете Subject и передаете значения в constructor.

Поскольку Subject является горячим Наблюдаемым само по себе, когда вы указываете ему значение sh, оно генерирует их немедленно, поэтому в вашем случае, когда Angular запускает constructor функция для вашего RecipeService. Но в то время шаблон RecipeListComponent еще не готов, поэтому | async еще не запущен.

Обычно в этих сценариях используется ios, BehaviorSubject . Сохраняет последнее переданное значение для поздних подписчиков:

private _recipesSource = new BehaviorSubject<Recipe[]>([]);

Answer 2

Это связано с тем, что recipes изменение не отслеживается Angular обнаружением изменения, поскольку оно мутирует при вызове подпрограммы ayn c.

Заменить

*ngFor="let recipe of recipes"

с

*ngFor="let recipe of rs.recipesMessage$ | async"

И вы можете удалить

loadRecipes(): void {
    this.rs.recipesMessage$
      .subscribe(
        recipes => this.recipes = recipes
      );
  }

, а также

this.loadRecipes() в ngOnInit