Question

我无法获得＆＃39;用户名＆＃39;的价值。在角度4应用程序中的表单数据。在HTML中，我有这样的行。

                  <section class="mdc-card__primary">
                        <div class="mdc-text-field">
                            <input type="text" id="username" class="mdc-text-field__input"
                            name="username" [(ngModel)]="loginValue.username" aria-controls="username-helptext">
                            <!-- <label for="username" class="mdc-text-field__label">Username</label> -->
                            <div class="mdc-text-field__bottom-line"></div>
                        </div>
                        <div class="mdc-text-field">
                            <input type="passsword" id="password" class="mdc-text-field__input" 
                            name="password" [(ngModel)]="loginValue.password" aria-controls="password-helptext">
                            <!-- <label for="password" class="mdc-text-field__label">Password</label> -->
                            <div class="mdc-text-field__bottom-line"></div>
                        </div>
                        <div class="mdc-text-field">
                            <input type="hidden" id="ltype" class="mdc-text-field__input" 
                            name="ltype" [(ngModel)]="loginValue.ltype" value="site">
                            <div class="mdc-text-field__bottom-line"></div>
                        </div>
                  </section>

在Logincomponents.ts中的

我有这行

        export class LoginComponent implements OnInit {


          loginValue:any;

          resnonseValue:any;
          cookieValue:any;
          errorMsg:any;
          sessionValue =  localStorage.getItem("userSession");

现在我在构建项目后遇到了以下错误。

          main.bundle.js:1 ERROR TypeError: Cannot read property 'username' of undefined

因此，我的表单数据为空。

1）当我将其声明为字符串时，它给出了编译时错误“＆＃39; username＆＃39;类型字符串上不存在。同样是密码和ltype。

2）我尝试使用导出界面，但它无法正常工作，同样的错误是

3）我尝试使用https://basarat.gitbooks.io/typescript/docs/types/index-signatures.html索引签名

4）在开发模式下使用ng-serve没有错误或警告但是在构建时，在成功构建之后这不起作用。

Answer 1

在使用双向绑定之前，您需要初始化loginValue：

loginValue = {
    username : '',
    password : '',
    ltype : ''
}

或者你应该删除2路绑定并像

一样

[ngModel]="loginValue?.username"

Answer 2

Define your loginValue in component like below, so that you will not get that error:

loginValue:any = {};

TypeError：无法读取属性＆＃39;用户名＆＃39;未定义的角度2

2 个答案: