Question

按照https://angular.io/docs/ts/latest/guide/forms.html

的表格教程进行操作

只要我使用templateUrl和单独的.html

，只要引用.ts文件中定义的任何属性，我就会一直收到未定义的错误。

当我使用相同的html并放置在``in template中的.ts文件中时，一切正常。

所以我的问题是：templateURl文件是否需要以某种方式定义范围？该教程似乎没有涉及任何内容，我认为它可以访问调用它的组件变量。

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

import { Guitar } from './guitar';

@Component({
  selector: 'guitar-form',
//  template: `
//  <div class="container">
//    <h1>Guitar Form</h1>
//    <form>
//      <div class="form-group">
//        <label for="brand">Brand</label>
//        <select class="form-control" required
//                  [(ngModel)]="testmodel.brand" name="brand">
//          <option *ngFor="let b of brands" [value]="b">{{b}}</option>
//        </select>
//        TODO: remove this: {{testmodel.brand}}
//      </div>

//      <div class="form-group">
//        <label for="model">Model</label>
//        <input type="text" class="form-control" required
//           [(ngModel)]="testmodel.model" name="model">
//          TODO: remove this: {{testmodel.model}}
//      </div>

//      <div class="form-group">
//        <label for="color">Color</label>
//        <input type="text" class="form-control"
//                [(ngModel)]="testmodel.color" name="color">
//                  TODO: remove this: {{testmodel.color}}
//      </div>

//      <button type="submit" class="btn btn-default">Submit</button>
//    </form>
//  </div>
//  `
  templateUrl: 'app/guitar-form.component.html'
})
export class GuitarFormComponent {

  brands = ['Fender', 'Gibson', 'Guild', 'Jackson', 'Epiphone', 'Charvel'];

  testmodel = new Guitar(69, this.brands[0], 'Stratocaster', 'Black');

  submitted = false;

  onSubmit() { this.submitted = true; }

  // TODO: remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }
}

有趣的是，当我评论它时，undefined消失了所以我可以证明，但具有讽刺意味的是，当放置在html中时诊断不再有效，这是早期工作的一个方面。我已经单独验证了连接性......

<div class="container">
  <h1>Guitar Form</h1>
  <form>
    {{ diagnostic }}
    <div class="form-group">
      <label for="brand">Brand</label>
      <select class="form-control" required
                [(ngModel)]="testmodel.brand" name="brand">
        <option *ngFor="let b of brands" [value]="b">{{b}}</option>

      </select>
              {{ testmodel.brand }}
    </div>

    <div class="form-group">
      <label for="model">Model</label>
      <input type="text" class="form-control" required
         [(ngModel)]="testmodel.model" name="model">
        TODO: remove this: {{testmodel.model}} -->
    </div>

    <div class="form-group">
      <label for="color">Color</label>
      <input type="text" class="form-control"
        [(ngModel)]="testmodel.color" name="color">
        {{ testmodel.color }}
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

Answer 1

我认为你需要添加

data = "Sports_" + data;

到moduleId: module.id,装饰者。

另见Angular2 - What is the meanings of module.id in component?

templateUrl在引用类属性时给出undefined

1 个答案: