了解角度 2 中的可观察量

我是Angular 2和可观察量的新手。

我有一个带有文本框的 HTML 模板。当可观察量不返回任何数据时，它会被清除，但当数据存在时，它会用第一个数据项填充。

我不知道这是怎么发生的，即使我已经阅读了有关可观察量的教程。

.HTML

<form class="clearfix" role="form"
      [ngFormModel]="basicDetailsForm">
    <div class="form-group col-md-6 no-padding">
        <label for="assignedTo" class="text-muted">Assigned To</label>
        <input class="form-control bold"
               id="assignedTo" 
               type="text" 
               [ngFormControl]="ctrlAssignedTo"
               (change)="assignedToChanged($event)"
               [(ngModel)]="activeItem.assignee.name" />
    </div>
</form>

我的组件 .ts 文件有

component.ts

 public ngOnInit(): void {
            // subscribe to users observable
            this.usersSubs = this.usersSubs || this.itemDetailService.users$.subscribe(function (user: any) {
                if (user.usedFor !== 'basic') {
                    return;
                }
                if (user.id === '0') {
                    context.activeItem.assignee = {};
                    return;
                }
                let assignedTo: any = {
                    id: user.id,
                    type: 'user',
                    url: user.url,
                    name: user.name,
                    archived: false,
                    archiveDate: null
                }
                context.activeItem.assignee = assignedTo;
            });
        }
 constructor(
        @Inject(AppStateService) public appStateService: AppStateService,
        @Inject(ItemDetailService) public itemDetailService: ItemDetailService,
        private formBuilder: FormBuilder) {
        super(appStateService, itemDetailService);

        this.activeItem = this.activeItem || {
            assignee: {}
        };
        // build the form
        this.basicDetailsForm = this.formBuilder.group({
            'assignedTo': ['']
        });
        this.ctrlAssignedTo = <Control>this.basicDetailsForm.controls['assignedTo'];
    }

和我的服务.ts文件有

service.ts

 private usersObserver: Observer<any>;
constructor(
    @Inject(ProjectsApiService) private apiService: ProjectsApiService,
    @Inject(AppStateService) private appStateService: AppStateService,
    @Inject(AppObservableService) private appObservableService: AppObservableService) {
    this.activeDetailTab = {
        index: 0
    }
}
public init() {
 this.users$ = this.users$ || new Observable((observer: any) => {
            this.usersObserver = observer;
        }).share();
}
     public getUserByAlias(alias: string, usedFor: string): void {
            let context = this;
            this.apiService.getUserByAlias(alias)
                .subscribe(
                (data: any) => {
                    if (data.data.length === 0) {
                        context.usersObserver.next({ id: '0', usedFor: usedFor });
                        return;
                    }
                    data.data.forEach(function (user: any) {
                        context.users.push(user);
                    });
                    data.data[0].usedFor = usedFor;
                    context.usersObserver.next(data.data[0]);
                },
                err => { console.log(err); },
                () => { console.log('Done'); }
                );
        }