Как я могу использовать переменные пользователя и пароля в моем запросе json?

Question

Рис. 1: Угловой 4

На первом рисунке у меня есть пользовательский ввод, и я могу отображать в консоли переменные имя пользователя и пароль.На втором рисунке я посылаю имя пользователя и пароль со своим токеном.Как я могу использовать имя пользователя и пароль с первого изображения и отправить их с моим заголовком?Пожалуйста, помогите.

Рис 2: запрос JSON

Answer 1

Хорошо, если вы ищете данные для входа в систему, правильный способ - создать событие вроде этого:

компонент для входа в систему:

@output
onLogin : EventEmitter<any> = new EventEmitter();

login(e){
***
this.onLogin.emit({username:username,password:password});
}

app component.html

<login-form (onLogin)="getData($event)"></login-form>

здесь «$ event» представляет ваш объект «{имя пользователя: имя пользователя, пароль: пароль}»;

в противном случае вы можете хранить данные в переменной и запускать "getData", когда захотите.

Другие предложения: Используйте угловые реактивные формы, подобные этой: https://angular.io/guide/reactive-forms#add-a-formgroup возможно запустите ваш xhr из сервисов angular.

Answer 2

Класс заголовков является константой, поэтому, когда вы используете его, возможна установка заголовков, когда вы используете новую инструкцию. т.е.

new Headers({header:value}) 
new Headers().append('header', 'value');

Однако это не работает, потому что это константы

let headers = new Header();
headers.append('header','value')

Вы можете делать только как

new Headers({header:btoa(userna + ':' + password)});

HTML

<form #myForm="ngForm" (submit)="onSubmit(myForm)">
    <input type="text" name="username">
    <input type="password" name="password"
    <input type="submit" value="Submit">
</form>

КОМПОНЕНТ

onSubmit(form) {
   if(form.valid) {
      console.log(form.control.username);
      console.log(form.control.password);
   }
}