在Angular中重写javascript项目

我是一名新的web开发人员，我想通过在Angular中创建一个简单的javascript项目来学习Angular。 这是一个使用MVC模式在javascript中开发的udemy项目

本项目分为三个部分：

搜寻 配方 购物清单

一旦用户在搜索栏中输入一些文本并按search，数据将填充在左侧，如图所示

我在Angular中创建了两个组件，一个是SearchComponent，另一个是result component。我一直在标题中搜索，并在正文中搜索结果组件。我创建了一个名为Recipe的服务类，使用HTTPClient从API获取数据

当我按下搜索按钮并将数据保存在Recipes变量中时，我正在调用API，但如何在resultcomponent中传递该数据

我有一个基本的疑问，当我们没有路由到另一个页面时，创建两个组件是否正确

在我们没有导航的情况下，处理此场景的正确方法是什么？一旦服务具有包含数据的配方变量，我如何填充resultcomponent

谢谢和问候

---

Nagasree。

将您的结果作为可观察结果存储在服务中：

export class RecipeService{
    results$: Observable<Result[]>;

    constructor(private http: HttpClient) {}

    search(value:string){
         this.results$ = this.http.get<Result[]>(...value...);
    }
}

export class SearchComponent {
    constructor(private recipeService: RecipeService) {}

    // call from button in template
    search(value:string){
        this.recipeService.search(value);
     }
}

访问结果组件中可观察到的结果，并使用异步管道处理订阅/取消订阅：

@Component({
  selector: 'app-results',
  template: '<li *ngFor=“let result of recipeService.results$ | async”>{{ result.name }} </li>'
})
export class ResultsComponent {
    constructor(private recipeService: RecipeService) {}
}

@组件({
选择器：“应用程序结果”，
模板：“{{result.name}”
})
导出类结果组件{
构造函数（私有recipeService:recipeService）{}
}

Stackblitz在上图中显示：

查看屏幕截图，我将使用至少3个组件：

• 搜索栏
• 结果
• 精选配方

---

将搜索结果存储为可观察的，并在结果组件上订阅，然后只要可观察值发生变化，您就可以获得数据。RxJSHi Derek的概念是可观察的，它是创建页面子部分组件的正确方法吗？是的，现在它主要分为两部分（标题和正文），它们与服务相连。这是正常的角结构。其中最重要的一点是在角度上可以观察到，使用角度，可以将数据与api同步。此链接将帮助您。找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件。一旦我按照您的指定更改了代码，我就会遇到这个错误。我在谷歌上搜索过他们说使用异步，但我已经使用了您提到的异步，因为recipe$是一个可观察的数组，通过异步管道转换为数组。尝试暂时放置“this.result$.subscribe（console.log）；”在服务的构造函数主体中，查看它是否记录了列表。还可以尝试使用更新的代码行在服务中初始化recipe$。我已使用console.log（）检查过，它正在获取数据，但即使在初始化之后也会得到相同的错误。很可能您的http服务没有以正确的列表/数组格式返回数据。下面是一个基于上述建议的工作stackblitz，但它使用

of

操作符返回配方数组，而不是调用http服务（我没有）：