外部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模板插值

回答

相關問題