Неспособность отобразить значение свойства класса в представлении углового 6

Question

Я пытаюсь получить местоположение пользователя из службы и отобразить его в представлении компонента. Я вполне могу получить местоположение из службы в компонент. Но когда я отображаю его в виде, оно отображается как неопределенное. Ниже приведен код.

Услуги:

enteredLocationName = new Subject<string>(); 

sendEnteredLocationName(location) {
    this.enteredLocationName.next(location);
}
getEnteredLocationName() {
    return this.enteredLocationName.asObservable();
}

Компонент-TS:

export class RestaurantSearchComponent implements OnInit {
  enteredLocationName: Subscription;
  enteredLocation:string;

  constructor(private shareDataService: ShareDataService) { }
  ngOnInit() {
    this.getEnteredLocationName();
}

getEnteredLocationName(){     
 this.enteredLocationName = 
 this.shareDataService.getEnteredLocationName().subscribe(resp => { 
        this.enteredLocation = resp;               
    });        
 }
ngOnDestroy() {
    this.enteredLocationName.unsubscribe();
 }
}

Компонент-View:

input [value]="enteredLocation" type="text" class="form-control" 
placeholder="Selected Location"

Answer 1

Свяжите с ngModel вместо value.

Как и на начальном этапе, value связывает значение, которое не определено, поэтому после получения значения оно не будет обновлять значение, но ngModel делает.

Иначе вы можете попробовать с async трубой. если вы хотите использовать значение.

<input [value]="enteredLocation | async" type="text" class="form-control" 
placeholder="Selected Location">

PS: я не уверен, с async будет работать или нет.

Answer 2

Когда вы используете Subject, он не содержит никаких значений, он просто вызывает подписку всякий раз, когда вы меняете ее значение. следовательно, его постоянное значение не определено.
Вместо этого вы должны использовать BehaviorSubject, который может содержать постоянное значение.

 enteredLocationName = new BehaviorSubject<string>('');