Javascript 通过@Input（）传递的数据

我对使用

@Input（）

传递到组件的数据有疑问。当我有一个包含一些数据的

列表

组件时。当我点击

edit

一个

view

按钮时，它会加载一些组件。在my

detailComponent

中：

@Input() serviceTimeGoal: IServiceTimeGoal;

和我的更新组件一样详细。但细节组件工作良好。但更新组件不接收任何数据。以下是我的开场白：

 <table
        class="table table-striped table-bordered table=hover"
        aria-describedby="page-heading"
      >
        <thead>
          <tr>
            <th scope="col"><span>Үүсгэсэн огноо</span></th>
            <th scope="col"><span>Үүсгэсэн хэрэглэгч</span></th>
            <th scope="col"><span>Шинэчилсэн огноо</span></th>
            <th scope="col"><span>Шинэчилсэн хэрэглэгч</span></th>
            <th scope="col"><span>Идэвхитэй</span></th>
            <th scope="col"><span>Хугацаа</span></th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let serviceTimeGoal of serviceTimeGoals; let i = index">
            <td>{{ serviceTimeGoal.createdAt | dateFormatPipe }}</td>
            <td>{{ serviceTimeGoal.createdBy }}</td>
            <td>{{ serviceTimeGoal.updatedAt | dateFormatPipe }}</td>
            <td>{{ serviceTimeGoal.updatedBy }}</td>
            <td>{{ serviceTimeGoal.enabled }}</td>
            <td>{{ serviceTimeGoal.time }}</td>
            <td class="text-right">
              <div class="btn-group">
                <button
                  type="submit"
                  (click)="
                    openModal(serviceTimeGoal, 'service-time-goal', $event)
                  "
                  class="btn btn-info btn-sm"
                >
                  <i class="icon-eye"></i>
                </button>
                <button
                  type="submit"
                  class="btn btn-primary btn-sm"
                  (click)="
                    openModal(serviceTimeGoal, 'update-service-time', $event)
                  "
                >
                  <i class="icon-pencil"></i>
                </button>
                <button
                  type="submit"
                  [routerLink]="[
                    '/service-time-goal',
                    {
                      outlets: {
                        popup: serviceTimeGoal.id.branchId + '/delete'
                      }
                    }
                  ]"
                  replaceUrl="true"
                  queryParamsHandling="merge"
                  class="btn btn-danger btn-sm"
                >
                  <i class="icon-bin"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
 </table>

<!-- Update component -->
<qms-modal id="update-service-time">
  <qms-service-time-goal-update
    [serviceTimeGoal]="serviceTimeGoal"
  ></qms-service-time-goal-update>
</qms-modal>

<!-- Detail component -->
<qms-modal id="service-time-goal">
  <qms-service-time-goal-detail
    [serviceTimeGoal]="serviceTimeGoal"
  ></qms-service-time-goal-detail>
</qms-modal>

我做错了什么？有什么建议吗

编辑：

更新组件：

@Input() serviceTimeGoal: IServiceTimeGoal;

ngOnInit() {
    this.isSaving = false;
    this.updateForm(this.serviceTimeGoal);
}

    updateForm(serviceTimeGoal: IServiceTimeGoal) {
    console.log(serviceTimeGoal);
    this.editForm.patchValue({
      cat: serviceTimeGoal.id.cat,
      reg: serviceTimeGoal.id.reg,
      loc: serviceTimeGoal.id.loc,
      name: serviceTimeGoal.id.name,
      tx1: serviceTimeGoal.id.tx1,
      tx2: serviceTimeGoal.id.tx2,
      tx3: serviceTimeGoal.id.tx3,
      tx4: serviceTimeGoal.id.tx4,
      createdBy: serviceTimeGoal.createdBy,
      updatedBy: serviceTimeGoal.updatedBy,
      enabled: serviceTimeGoal.enabled,
      time: serviceTimeGoal.time
    });
  }

@Input() serviceTimeGoal: IServiceTimeGoal;

详细组件：

@Input() serviceTimeGoal: IServiceTimeGoal;

ngOnInit() {
    this.isSaving = false;
    this.updateForm(this.serviceTimeGoal);
}

    updateForm(serviceTimeGoal: IServiceTimeGoal) {
    console.log(serviceTimeGoal);
    this.editForm.patchValue({
      cat: serviceTimeGoal.id.cat,
      reg: serviceTimeGoal.id.reg,
      loc: serviceTimeGoal.id.loc,
      name: serviceTimeGoal.id.name,
      tx1: serviceTimeGoal.id.tx1,
      tx2: serviceTimeGoal.id.tx2,
      tx3: serviceTimeGoal.id.tx3,
      tx4: serviceTimeGoal.id.tx4,
      createdBy: serviceTimeGoal.createdBy,
      updatedBy: serviceTimeGoal.updatedBy,
      enabled: serviceTimeGoal.enabled,
      time: serviceTimeGoal.time
    });
  }

@Input() serviceTimeGoal: IServiceTimeGoal;

更新：

详情：

---

如果要在多个组件之间共享相同的数据，我认为使用共享服务会更有效。您可以找到一些示例代码片段

你能为细节和更新组件添加代码库吗？@JuChengJiangedited@Poldo我已经更新了。@Poldo更新了我的问题OK。是否已将更新和详细信息组件作为父组件中的子组件导入？但问题是列表组件中已经初始化了两个组件。我已修复了它。这是由于列表组件中的两个组件发生了某些事情而导致的。