Question

我正在使用主题向基本电话簿应用程序添加编辑功能。我对订阅回调内部的组件类变量所做的更改不会反映在其外部或模板中。

我已经尝试了以下问题的答案中列出的解决方案： Angular 2 View will not update after variable change in subscribe

在service.ts中：

startedEditing= new Subject<number>();

在details.component.ts中（通过fu传递数据的地方）：

onEdit(){
    this.contactsService.startedEditing.next(this.id);
  }

在edit-component.ts中（在ngOnInit中）：

this.subscription=this.contactsService.startedEditing.subscribe(
      (index:number)=>{
        this.editMode=true; 
        this.editedItemIndex=index;
        this.editItem=this.contactsService.getContact(this.editedItemIndex);         
          this.editForm.setValue({
            address:this.editItem.address,
            name: this.editItem.name,
            phone:this.editItem.phone,
            profession:this.editItem.profession
          });
          console.log("in subscribe: "+this.editedItemIndex);

      }
    );
    console.log("out of it :" + this.editedItemIndex);
  }

控制台上的输出：

in subscribe: 0
out of it : undefined

预期结果：

in subscribe: 0
out of it :0

Answer 1

console.log("out of it :")仅在初始化组件时运行，而此时this.editedItemIndex未定义，因为startedEditing不变，因此行{ {1}}尚未触发。

它是异步！如果您执行this.editedItemIndex=index，则是因为您正在等待某些内容（例如：一个值）。如果您尝试获取订阅之外的值，它将不等待该值，并且显示为undefined。

如果您尝试使用代码，则实际输出应为：

startedEditing.subscribe()

Answer 2

在his.editedItemIndex中未定义t console.log("out of it :" + this.editedItemIndex);是正常的 这部分上方的代码是异步的，因此，当运行console.log("out of it :" + this.editedItemIndex);时，尚未执行订阅中的代码并且尚未初始化this.editedItemIndex。现在ngOnInit是在您的组件中调用的第一个方法，因此在其他方法或模板中，this.editedItemIndex应该已经初始化并且未定义。可能是您可以共享html代码或其他未定义html的地方，因此答案可以更加精确。

在.subscribe（）方法中所做的更改未反映在其中或模板中

2 个答案: