Question

我正在开始使用AngularJS2网络应用，我已经开始使用登录组件了。我有一个链接到控制器变量的文本输入，它也显示在视图中。但是，由于某种原因，更新文本字段不会更新其旁边的文本显示。但是，alert（） - 我编辑的变量会显示所做的更改。这是我的代码：

login.component.ts：

 <tfoot>
                    <tr>
                        <th> </th>
                        <th>
                            <select class="form-control input-sm">
                            <option value=""></option><option value="1">a</option>
                            <option value="2">b</option>
                            <option value="3">c</option>
                            <option value="4">d</option>
                            <option value="5">e</option>                                
                            </select>
                        </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                        <th> </th>
                    </tr>
                </tfoot>

login.component.html

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params }   from '@angular/router';
import { FormsModule }              from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent {

    login: string = "test1";
    pass:  string = "test2";

    onSubmit(): void {
        alert("Form submit: " + this.login + this.pass);
    }
}

我的 index.html 标题用于导入脚本：

<div id="login">

    {{this.login}}
    {{this.pass}}

    <form (ngSubmit)="onSubmit()">

        <label for="form-login">Login</label>
        <input type="text"     class="form-input" id="form-login" name="form-login" [(ngModel)]="login"><br>

        <label for="form-pass">Mot de passe</label>
        <input type="password" class="form-input" id="form-pass"  name="form-pass"  [(ngModel)]="pass">

        <button type="submit" id="button-connexion" [disabled]="!heroForm.form.valid">Connexion</button>

    </form>

</div>

我的控制台显示以下错误：

<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err){ console.error(err); });
</script>

Answer 1

我有同样的问题。我意识到当我在我的html页面上使用了一个未定义的变量时，它会导致错误。基本上，您需要定义变量或从您的html页面删除。

正如我所看到的，您尚未在组件中定义heroForm。

AngularJS2：无法读取属性＆＃39;形式＆＃39;未定义的

1 个答案: