外部HTML模板插值

我是新来的角2.0和角一般。我在这个问题上一直在挖掘几天，我似乎无法在任何地方找到关于它的信息。我有一个组件在TemplateURL中调用外部HTML，如下所示：外部HTML模板插值

@Component({ 
    selector: 'Form-template', 
    templateUrl: "app/components/HTMLReferences/CommentsForm.html", 
    styleUrls: ["app/components/CSSReferences/CommentForm.css"] 
    })

这里没什么疯狂的。

现在在我的模板中，我需要加载一个对象变量“频率”来填充下拉框。外部HTML模板中的代码如下：

<div class="dropdown"> 
    <select id="frequency" 
      class="form-control" 
      #frequency="ngModel" 
      ngModel 
      required> 
     <option value=""></option> 
     <option *ngFor="let frequency of frequencies" value="{{ frequency.id }}"> 
     {{frequency.label}} 
     </option> 
    </select> 
    </div>

再次，没什么特别的。该对象位于组件的导出类中，如下所示：

export class FormTemplateComponent { 
    frequencies = [ 
    { id: 1, label: 'Daily' }, 
    { id: 2, label: 'Weekly' }, 
    { id: 3, label: 'Monthly' } 
    ]; 
}

当我加载页面时，下拉框中没有任何内容出现。这里有一个截屏：

我FromTemplateComponent也是根据声明的NGModules文件中。

我必须在这一切中失去一些令人难以置信的愚蠢，但我似乎无法弄清楚。思考？

来源

2017-02-28 Tom L' esperance

永远记住孩子：使用ngModel时，请确保正确设置名称。

来源

2017-02-28 04:51:39

您应该使用属性如下

<div class="dropdown"> 
    <select id="frequency" 
      class="form-control" 
      [(ngModel)]="frequency" 
      required> 
     <option value=""></option> 
     <option *ngFor="let frequency of frequencies" [value]="frequency.id"> 
     {{frequency.label}} 
     </option> 
    </select>

结合您可以登录并检查你的SELECT语句中使用(change)事件作为

<select id="frequency" (change)="changed(frequency)"> 
....

这是在下面的演示plunker可用

LIVE DEMO

来源

2017-02-28 03:48:30 Aravind

这似乎不能解决问题。当我在同一个文件中声明所有内容时，我可以完成这项工作。问题来自使用@component装饰器上的TemplateURL：属性。只要我指向外部文件，一切都会中断。这几乎就像导出类中的频率对象没有被发送到我的外部HTML文件。 –

更新与错误 – Aravind

屏幕截图的帖子发现问题！偷偷摸摸的偷偷摸摸的。我忘了设置名称=“频率”。原始代码有效。我只是一个ditz。可以踢自己在胫骨。感谢您的帮助。我想我需要下次尝试橡皮鸭调试。 –

外部HTML模板插值

回答

相关问题