第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

使用ngModel的Angular 2兩種方式綁定不起作用

使用ngModel的Angular 2兩種方式綁定不起作用

炎炎設(shè)計(jì) 2019-12-12 14:10:44
無法綁定到“ ngModel”，因?yàn)樗皇恰?input”元素的已知屬性，并且沒有與相應(yīng)屬性匹配的指令注意：即時(shí)通訊使用alpha.31import { Component, View, bootstrap } from 'angular2/angular2'@Component({    selector: 'data-bind'})@View({    template:`        <input id="name" type="text"             [ng-model]="name"             (ng-model)="name = $event" />        {{ name }}    ` })class DataBinding {     name: string;    constructor(){        this.name = 'Jose';    }}bootstrap(DataBinding);
查看完整描述

4 回答

?
jeck貓

TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊

Angular已于9月15日發(fā)布了最終版本。與Angular 1不同，您可以ngModel在Angular 2中使用指令進(jìn)行兩種方式的數(shù)據(jù)綁定，但是您需要以一些不同的方式來編寫它，例如[(ngModel)]（Banana in a box語法）。現(xiàn)在幾乎所有的angular2核心指令都不支持，kebab-case而應(yīng)該使用camelCase。


現(xiàn)在ngModel指令屬于FormsModule，這就是為什么您應(yīng)該import在（NgModule）的元數(shù)據(jù)選項(xiàng)中使用FormsModulefrom @angular/forms模塊。之后，您可以在頁面內(nèi)使用指令。importsAppModulengModel


app / app.component.ts


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


@Component({

  selector: 'my-app',

  template: `<h1>My First Angular 2 App</h1>

    <input type="text" [(ngModel)]="myModel"/>

    {{myModel}}

  `

})

export class AppComponent { 

  myModel: any;

}

app / app.module.ts


import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent }   from './app.component';


@NgModule({

  imports:      [ BrowserModule, FormsModule ], //< added FormsModule here

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})


export class AppModule { }

app / main.ts


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';


const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);



查看完整回答
反對(duì) 回復(fù) 2019-12-13
?
慕俠2389804

TA貢獻(xiàn)1719條經(jīng)驗(yàn) 獲得超6個(gè)贊

關(guān)鍵點(diǎn)：


僅當(dāng)FormsModule作為AppModule的一部分可用時(shí)，angular2中的ngModel才有效。


ng-model 在語法上是錯(cuò)誤的。


方括號(hào)[..]表示屬性綁定。

圓括號(hào)（..）表示事件綁定。

當(dāng)方括號(hào)和圓括號(hào)放在一起時(shí)，[[..]]表示雙向綁定，通常稱為香蕉盒。

因此，修復(fù)您的錯(cuò)誤。


步驟1：導(dǎo)入FormsModule


import {FormsModule} from '@angular/forms'

第2步：將其添加到AppModule的import數(shù)組中，作為


imports :[ ... , FormsModule ]

步驟3：ng-model將香蕉盒更改為ngModel


 <input id="name" type="text" [(ngModel)]="name" />

注意：此外，您也可以分別處理以下兩種方式的數(shù)據(jù)綁定


<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>


valueChange(value){


}



查看完整回答
反對(duì) 回復(fù) 2019-12-13
  • 4 回答
  • 0 關(guān)注
  • 520 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)