Aurelia - 내 템플릿의 변수에 액세스 할 수 없습니다.

Question

간단한 질문.

<template> 
<section> 
    <h2>${heading}</h2> 

    <form role="form" submit.delegate="login()"> 
     <div class="form-group"> 
      <label for="userName">User Name</label> 
      <input type="text" value.bind="userName" class="form-control" id="userName" placeholder="User Name"> 
     </div> 
     <div class="form-group"> 
      <label for="password">Password</label> 
      <input type="password" value.bind="password" class="form-control" id="password" placeholder="Password"> 
     </div> 
     <button type="button" click.delegate="submitLogin()" class="btn btn-default">Login</button> 
    </form> 

    <hr> 
    <div class="alert alert-danger" if.bind="loginError">${loginError}</div> 
</section> 

내가 내 login.ts 파일에 이러한 변수를 액세스 할 수있는 방법을 찾기 위해 주위를 둘러 보았다했습니다 : 사용자 이름과 암호 형태 -

나는 로그인 템플릿을 가지고있다.

특히 단추 로그인을 누르면 API에 보낼 수 있습니다.

submitLogin() 함수가 있지만 변수 사용자 이름과 비밀번호에 액세스하는 방법을 모르겠습니다.

누군가이 변수에 어떻게 액세스하는지 표시 할 수 있습니까? 나는 사용자 이름과 암호를 빨간색 밑줄을받을

..

 import { HttpClient } from "aurelia-fetch-client"; 
     import { autoinject } from "aurelia-framework"; 
     import { TokenService } from "../tokenService"; 

     @autoinject 
     export class Login { 
      http: HttpClient; 
      tokenService: TokenService; 

      heading = "Login"; 


      constructor(tokenService: TokenService, http: HttpClient,) { 
      this.tokenService = tokenService; 
      this.http = http; 
      } 

      public submitLogin(): void { 


       console.log("userName, Password", this. userName, this.password); 
      } 
     } 

Answer 1

형식 논리를 제출 자체가 당신이 당신의 클래스 필드를 만들 수 있습니다

<form role="form" submit.delegate="submitLogin()"> 
    <div class="form-group"> 
     <label for="username">User Name</label> 
     <input type="text" value.bind="username" class="form-control" id="username" placeholder="User Name"> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <input type="password" value.bind="password" class="form-control" id="password" placeholder="Password"> 
    </div> 
    <button type="submit" class="btn btn-default">Login</button> 
</form> 

버튼 타입 submit을 제공 한 <form>에 바인딩 할 수 있습니다 보기 또는 다른 방법으로 접근 가능

import { HttpClient } from "aurelia-fetch-client" 
import { autoinject } from "aurelia-framework" 
import { TokenService } from "../tokenService" 

@autoinject 
export class Login { 
    heading: string = "Login" 
    username: string = '' 
    password: string = '' // these are pubic fields available in your view unless you add 'private' in front of them 

    constructor(private tokenService: TokenService, private http: HttpClient) { // this way you can keep them private since they are not needed in the view 

    } 

    submitLogin() { 
     const { username, password } = this 
     if (!!username && !!password) { // or your validations 
      this.tokenService.login({ username, password }) 
     } 
    } 
}