Angular 将数据附加到子组件

Angular 将数据附加到子组件,angular,typescript,Angular,Typescript,场景:我有一个下拉列表,在其中我选择电影标题,然后点击开始按钮。每一分钟,我的应用程序都会调用api并检查所选电影的预订是否打开。当预订未打开时,应将其记录在类似终端的html容器中。对于每个呼叫,右侧终端应显示 有关正在调用的api的信息(在调用期间) 关于电影状态的信息(通话后) 等待(在1分钟间隔内) 从1-3开始 以下是用户界面: 这是我的密码: spicinemas.component.html <div class="container"> <div clas

场景:我有一个下拉列表,在其中我选择电影标题,然后点击开始按钮。每一分钟,我的应用程序都会调用api并检查所选电影的预订是否打开。当预订未打开时,应将其记录在类似终端的html容器中。对于每个呼叫,右侧终端应显示

  • 有关正在调用的api的信息(在调用期间)
  • 关于电影状态的信息(通话后)
  • 等待(在1分钟间隔内)
  • 从1-3开始
  • 以下是用户界面:

    这是我的密码:

    spicinemas.component.html

    <div class="container">
      <div class="row">
        <div class="col-4">
          <form [formGroup]="movieForm" (ngSubmit)="getStatus()">
            <div class="form-group">
            <select class="form-control" id="movie" name="movie" formControlName="movie">
              <option *ngFor="let movie of movies" [value]="movie">{{movie}}</option>
            </select>
            </div>
            <button type="submit" class="btn btn-danger btn-block">Start</button>
          </form>
        </div>
        <div class="col-8">
          <app-terminal></app-terminal>
        </div>
      </div>
    </div>
    

    目前,终端位于单独的组件中。我需要一个关于如何实现这一点的建议?

    使用带有主题的服务,将其注入两个组件,从
    spicinemas.component.ts
    发布日志,并在
    应用程序终端中订阅


    如果您不想在
    应用程序终端中对数组进行数据绑定,您可以手动将元素附加到那里。

    使用带有主题的服务,将其注入两个组件,从
    spicinemas.component.ts
    发布日志,然后在
    应用程序终端中订阅


    如果你不想在你的
    应用程序终端中对数组进行数据绑定,你可以在那里手动添加元素。

    看看这个:我知道我可以将数据从一个组件发送到另一个组件,但是如何让终端显示数据而不将以前的datause数组作为输入删除问题是,日志会随着时间的推移而累积,如果我将所有日志附加到一个数组中,并将其传递给终端,那么终端应该遍历所有数组并显示。基本上我不想这样,我只想发送当前的日志,终端只是在前一个日志的下面附加它。你可以创建一个方法,以友好的方式插入新行。您可以在父级中访问它并简单地调用它。看这个:我知道我可以将数据从一个组件发送到另一个组件,但是如何让终端显示数据而不将以前的datause数组作为输入擦除问题是,如果我将所有日志附加到一个数组中并将其传递给终端,日志会随着时间的推移而累积,终端应在所有阵列和显示器之间循环。基本上我不想这样,我只想发送当前的日志,终端只是在前一个日志的下面附加它。你可以创建一个方法,以友好的方式插入新行。您可以在父级中访问它,并简单地调用它。
      getStatus() {
        interval(1 * 60 * 1000)
          .pipe(
            flatMap(() => this.service.checkStatus(this.movieForm.value.movie))
          )
          .subscribe(res => {
            const response: any = res;
            if (!response.status) { // false for booking not opened
            // implementation
            }
          });
      }