1. 程式人生 > >angular2中ngModel繫結問題

angular2中ngModel繫結問題

     ts拿到的資料結構是一個json,json中的結構是類似於陣列套陣列的資料結構,在頁面上顯示的時候是一個input框,我需要做的是將類似於[1,2,3,4]這種結構的資料迴圈拿到其中的1,2,3,4,然後繫結到input上,使用到的是angular2的ngModel繫結,繫結完之後報了錯:Cannot assign to a reference or variable!

    百度一番大概明白了是什麼意思,開始說是重名了,就開始找哪裡定義的時候重名了,錯誤的意思是:無法分配給引用或變數![(ngModel)]是用來資料雙向繫結的,該問題正確的解決方法是,當我們取一個迴圈中的內容給元素使用ngModel繫結時需要寫成option[i]的格式。舉個例子:

正確寫法:

<div>
   <li  *ngFor="let c of question.answer;let i=index">
      <input [(ngModel)]="question.answer[i]"/>  //注意這一行
    </li>
  </div>
</div>

錯誤寫法:

<div>
   <li *ngFor="let c of question.answer;let i=index">
      <input  [(ngModel)]="c"/>  //區別在這裡
    </li>
  </div>
</div>
     由於對angular使用的還不是很熟悉,遇到了一些坑,在填坑的過程中也漸漸對他熟悉了,所以將這些坑記錄下來,以便再遇到這種問題的愛好者可以迅速填坑,迅速成長!

相關推薦

angular2ngModel問題

     ts拿到的資料結構是一個json,json中的結構是類似於陣列套陣列的資料結構,在頁面上顯示的時候是一個input框,我需要做的是將類似於[1,2,3,4]這種結構的資料迴圈拿到其中的1,2

Vue動態img的src屬性

問題:不同的status值,載入不同的圖片,如下程式碼雖然動態綁定了src,但是並不能成功載入圖片 <div> <img :src="imgUrl"/> <p>{{info}}</p> </div> computed:

Fragment ListViewContextMenu

package com.example.administrator.imbobo.controller.fragment;import android.content.BroadcastReceiver;import android.content.Context;import android.content

Javascript事件的函式加括號和不加括號的區別

今天在學習javascript中的時候遇到了一個問題,我將此問題簡化,抽取部分程式碼,如下: 說明:#fname為一個按鈕,test是一個普通函式 test函式 function test() { alert("執行test函式"); }

說說在 Vue.js 如何樣式(class 或 style)

在資料繫結中,最常見就是動態繫結元素的 class 或內聯樣式 style 咯,它們也是 HTML 的屬性,所以可以使用 v-bind 指令 。 1 繫結 class 1.1 物件語法 使用 v-bind:class 屬性,實現動態切換 class。 html:

WPF:只讀集合在 XAML (WPF:Binding for readonly collection in xaml)

問題背景: 某一天,我想做一個簽到打卡的日曆。基於 Calendar,想實現這個目標,於是找到了它的 SelectedDates 屬性,用於標記簽到過的日期。 那麼 問題 來了: 基於MVVM模式,想將其在xaml中繫結到ViewModel中的一個List<DateTime&g

Vue事件

1.滑鼠劃過操作hover 2.新增一個滑鼠點選事件v-on:click="aaa(0)" 可以寫成@click="aaa(0)" <div>{{activeindex}}</div> activeIndex=null 設定初始值為空 3.給aaa新增

input框onclik直接事件

input框onclik中直接繫結事件 //原版 <button type="button" onclick="reload();">取消</button> function reload(){ parent.reLoad(); paren

Angular Forms - 自定義 ngModel 值的方式

在 Angular 應用中,我們有兩種方式來實現表單繫結——“模板驅動表單”與“響應式表單”。這兩種方式通常能夠很好的處理大部分的情況,但是對於一些特殊的表單控制元件,例如input[type=datetime]、input[type=file],我們需要重寫預設的表單繫結方式,讓我們繫結的變數不再僅僅只是一

.Net MVCSelectList預設值失效的解決辦法

        今天在使用MVC的下拉控制元件時,為其繫結資料使用了SelectList,但在修改資料的時候,預設值居然繫結失敗?後來經過多番研究,原因在於控制器中提供的資料來源變數名稱和檢視中下拉列表框的name名稱一致了,導致繫結資料失敗。 解決辦法:將資料來源

Vue專案動態src路徑不成功(已解決)

問題: 在做Vue專案的時候,由於專案需求,需要動態繫結img的src時,突然發現如果說是直接請求後臺介面的圖片地址就能顯示,但是直接動態繫結img的src的圖片的相對路徑或者是絕對路徑的時候,圖片不能

與session的物件相關的監聽器(物件感知監聽器)

當用戶很多的時候,怎麼對伺服器進行優化? 這裡介紹session的鈍化與活化! 鈍化狀態:是將session記憶體中的物件持久化(序列化)到磁碟 活化狀態:就是將磁碟上的物件再次恢復到session記憶體中   Customer實體類 實現 HttpSessionA

WinformCombox資料來源 型別作為引數傳遞

//呼叫 IniCombox(cbChannelName, typeof(Model.SystemEnum.ChannelName)); //具體實現 public void IniCombox(Relations.Control.ComBox cb, Type type)

js方法多次問題:

2018年11月13日 15:52:57 a好記性不如爛筆頭 閱讀數:6 標籤: 前端 js

angularJS之ngModel日期型別出現錯誤Angular error:datefmt的解決辦法

<input type="date" ng-model="dateQry"> $scope.dateQry = "2014-12-24"; 在angular中故意將input

layui事件

開頭宣告 非原創(下面的選項不知道選哪個,厚著臉皮選個原創)  初入職場的小白 總有太多不懂  寫頁面的時候有一個需求是要  點選按鈕出彈框頁面  layui中有彈框但是沒有符合需求的  翻了大半天的文件 示例都沒法實現想要的結果 終於 在我的不(y

vue動態圖片

當img標籤裡的圖片地址是動態變化時,如果圖片不是從後臺獲取,是在assest檔案裡時,要現在data裡初始化其值用require的方式,具體如下:data () { return { // 導航列表 first

vue動態表單元素的屬性

在vue中有時候可能想像使用jq一樣給某個元素新增屬性,如 $('#select1').attr('disabled','disabled') 這種方法也能實現,但是在vue中能用vue的方法還是儘量不要使用jq 使用vue的方法來新增屬性可以這樣:

spring @ModelAttribute變數中文亂碼的解決辦法

網上找了一些方法: 方法一 在專案的web.xml中配置spring的Character Encoding Filter <!-- Servlet Encoding Start --> <filter> <filter

Angular2+ 雙向資料

我們經常需要顯示資料屬性,並在使用者作出更改時更新該屬性。 在元素層面上,既要設定元素屬性,又要監聽元素事件變化。 Angular 為此提供一種特殊的雙向資料繫結語法:[(x)]。 [(x)]語法結合了屬性繫結的方括號[x]和事件繫結的圓括號(x)。 當一個元素擁有