单击按钮时有角度填充禁用的输入字段

Question

我有两个组件（不是父子组件）。第一个组件具有搜索输入字段，应在单击按钮时填充该字段，并使用第二个组件中可用的值。按钮单击也发生在第二个组件中。我尝试了输入输出，但似乎这仅适用于父子连接。我还尝试将我需要的值保存在服务中，然后通过该服务在第一个组件中获取它，但我没有定义。感谢帮助。

这是我的代码：

第一组件

<mat-form-field>
      <mat-label class="mat-uppercase has-events">
       <span> {{ "SEARCH_DEVICES" | translate | uppercase }}</span>
      </mat-label>
      <input type="text" formControlName="actorDevice" matInput />
    </mat-form-field>

第二组件

TS

passDevice(id: string) {
 this.deviceService.getDeviceById(id).subscribe((res) => {
  this.deviceName = res.deviceName[0].name;
});
this.deviceService.selectedDeviceName = this.deviceName;

}

HTML

<ng-container matColumnDef="selectRow">
  <mat-header-cell *matHeaderCellDef>
    {{ "SELECT" | translate }}
  </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-button type="button" (click)="passDevice(row.id)">
      Select
    </button>
  </mat-cell>
</ng-container>

Answer 1

在从 API 返回数据之前，您正在服务中设置 selectedDeviceName。这就是为什么它是未定义的。您需要在订阅内设置它

passDevice(id: string) {
 this.deviceService.getDeviceById(id).subscribe((res) => {
  this.deviceName = res.deviceName[0].name;
  this.deviceService.selectedDeviceName = this.deviceName;
});

Answer 2

我一发布问题，就找到了解决方案。我使用了一项服务，其中定义了一个主题类型（rxjs）的变量，并在第一个组件中使用它来用我需要的值填充该变量，然后在第二个组件中我获取了该值并将其传递给html 输入字段。

服务

export class SearchAppointmentService {
  addName: Subject<string>;
  constructor() {
    this.addName = new Subject<string>();
  }
}

第一组件

this.deviceService.getDeviceById(id).subscribe((res) => {
      this.deviceName = res.deviceName[0].name;
      this.searchAppointmentService.addName.next(this.deviceName);
    });

第二组件

 addNameSubscription: Subscription;

 this.addNameSubscription = this.searchAppointmentService.addName.subscribe(
      (res) => {
        this.inputDeviceName = res;
      }
    );

HTML

<input
  type="text"
  formControlName="actorDevice"
  matInput
  [value]="inputDeviceName | uppercase"
/>