正文 

当前位置： 首页 > 知识 >

模型绑定不适用于angular2中的选择[重复]

     2023-03-05     285

关键词：

【中文标题】模型绑定不适用于angular2中的选择[重复]【英文标题】：model bind is not working with select in angular2 [duplicate] 【发布时间】：2016-08-14 10:18:06 【问题描述】：

我正在尝试设置下拉菜单的默认值，我为模型设置了默认值但它没有更新选择

请看https://plnkr.co/edit/bNM5Yxx78iykv2opazoL?p=preview

@Component(
    selector: 'my-app',
    template: `
    <h1>Hello</h1>
<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option attr.value="tower._id" *ngFor="#tower of _towers;">Tower tower.name</option>
</select>    
    `)
export class AppComponent 
  _towers = [_id:1, name: '1', _id:2, name: '2', _id:3, name: '3'];
  constructor() 
    this._selectedTower = 2 ;
  

  changeTower() 
    setTimeout(()=>
      alert( this._selectedTower);
    ,100);

【问题讨论】：

plnkr.co/edit/slsnV5nc3zVVqXeuIJzZ?p=preview 【参考方案1】：

您需要以这种方式使用 ngValue 进行选择：

<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option [ngValue]="tower._id" *ngFor="#tower of _towers;">Tower tower.name</option>
</select>

看到这个 plunkr：https://plnkr.co/edit/UC5iYQUIFIrQMNeYbSQy?p=preview。

【讨论】：

【参考方案2】：

如果_selectedTower 指的是对象而不是原始值（_towers 也是如此 - 对象数组而不是原始值）然后使用 ngValue 而不是 value

<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option [ngValue]="tower" *ngFor="let tower of _towers;">Tower tower.name</option>
</select>

【讨论】：

【参考方案3】： 
<select class="form-control selectpicker" #select (change)="changeTower(select.value)" [(ngModel)]="_selectedTower">
  <option value="tower._id" *ngFor="#tower of _towers;">Tower tower.name</option>
</select>  

changeTower(id) 

    //id is the selected value

【讨论】：

模型绑定不适用于 ASP.NET Core 2 WebAPI 中的 POST 请求

】模型绑定不适用于ASP.NETCore2WebAPI中的POST请求【英文标题】：ModelbindingisnotworkingonPOSTrequestinASP.NETCore2WebAPI【发布时间】：2018-03-2700:09:39【问题描述】：这是我的模型。publicclassPatientpublicstringNameget;set;publicstringGenderget;set;publicdouble... 查看详情

MVC4 webapi中的反序列化/模型绑定不适用于数组

】MVC4webapi中的反序列化/模型绑定不适用于数组【英文标题】：Deserialization/modelbindinginMVC4webapidoesnotworkwitharrays【发布时间】：2012-03-2411:18:02【问题描述】：我正在使用新的WebApi，它是MVC4测试版的一部分。我有以下课程：publicclass... 查看详情

angular 2 [innerHTML] 在 html 内渲染（不适用于 angular 2）[重复]

】angular2[innerHTML]在html内渲染（不适用于angular2）[重复]【英文标题】：angular2[innerHTML]renderinsidehtml(notworkingonangular2)[duplicate]【发布时间】：2017-08-2519:02:51【问题描述】：我正在使用Angular2，我尝试将我在变量action.render中的文本呈... 查看详情

JsonConverter 不适用于模型绑定

】JsonConverter不适用于模型绑定【英文标题】：JsonConverterdoesnotworkonmodelbinding【发布时间】：2019-07-0314:46:12【问题描述】：我有以下型号publicclassSignDocumentsModel[JsonProperty(ItemConverterType=typeof(BinaryConverter))]publicbyte[][]Documentsget;se 查看详情

PhantomJS 不适用于 Angular2 项目中的 Karma

】PhantomJS不适用于Angular2项目中的Karma【英文标题】：PhantomJSdoesnotworkwithKarmainAngular2project【发布时间】：2017-03-0800:33:30【问题描述】：我使用angularcli(1.0.0-rc1.0.0)创建了一个开箱即用的项目。然后我安装了PhantomJS插件（npminstallkarma... 查看详情

将ngModel绑定到选择控件的模型[重复]

】将ngModel绑定到选择控件的模型[重复]【英文标题】：BindingngModeltoamodelforaselectcontrol[duplicate]【发布时间】：2016-04-0108:55:12【问题描述】：在Angular1.x中，您可以将ngModel绑定到模型以用于选择控件：<selectng-model="selectedPerson"ng-opt... 查看详情

模型绑定不适用于 asp.net 核心 Web api 控制器操作方法中的 Stream 类型参数。（即使使用自定义流输入格式化程序）

】模型绑定不适用于asp.net核心Webapi控制器操作方法中的Stream类型参数。（即使使用自定义流输入格式化程序）【英文标题】：ModelbindingnotworkingwithStreamtypeparameterinasp.netcorewebapicontrolleractionmethod.(Evenwithcustomstreaminputformatter)【发布... 查看详情

ASP.NET Web API - 模型绑定不适用于 POST 上的 XML 数据

】ASP.NETWebAPI-模型绑定不适用于POST上的XML数据【英文标题】：ASP.NETWebAPI-ModelBindingnotworkingwithXMLdataonPOST【发布时间】：2012-10-1004:36:43【问题描述】：在使用带有ASP.NETWebAPI的XML数据进行POST时，我无法让模型绑定工作。JSON数据工作... 查看详情

表单验证不适用于 Ionic 2 中的 Angular 2 FormBuilder

】表单验证不适用于Ionic2中的Angular2FormBuilder【英文标题】：FormvalidationisnotworkingwithAngular2FormBuilderinIonic2【发布时间】：2017-02-0523:45:01【问题描述】：我正在构建一个Ionic2（打字稿）应用程序。在复选框（ion-checkbox标记）中的简... 查看详情

RxUI ObservableAsPropertyHelper 不适用于 XAML 绑定

...发布时间】：2015-03-2801:51:46【问题描述】：我有以下视图模型类（基于RxUIdesignguidelines）：publicclassSomeViewModel:ReactiveObjectprivatereado 查看详情

淘汰赛中的数据绑定不适用于多个属性

】淘汰赛中的数据绑定不适用于多个属性【英文标题】：Databindinknockoutisnotworkingformultipleattributes【发布时间】：2019-03-1914:13:27【问题描述】：我有一个带有数据绑定的以下div标签它给出以下错误绑定值:visible:showBannerMessage,style:bac... 查看详情

Angular2（最终版本）组件中的*ngFor：无法绑定到'ngForOf'，因为它不是'div'的已知属性[重复]

】Angular2（最终版本）组件中的*ngFor：无法绑定到\\\'ngForOf\\\'，因为它不是\\\'div\\\'的已知属性[重复]【英文标题】：Angular2(finalversion)*ngForincomponent:Can\'tbindto\'ngForOf\'sinceitisn\'taknownpropertyof\'div\'[duplicate]Angular2（最终版本）组件中... 查看详情

Rxjs 过滤器运算符不适用于 Angular2 Observable

】Rxjs过滤器运算符不适用于Angular2Observable【英文标题】：RxjsfilteroperatornotworkingwithAngular2Observable【发布时间】：2016-12-0200:24:25【问题描述】：在这个plunker我正在尝试在类member.service.ts中的angular2observable(Rxjs)上使用过滤器运算符。... 查看详情

Java 中的 split() 方法不适用于点 (.) [重复]

】Java中的split()方法不适用于点(.)[重复]【英文标题】：Thesplit()methodinJavadoesnotworkonadot(.)[duplicate]【发布时间】：2011-12-1715:54:44【问题描述】：我准备了一个简单的代码sn-p以便将错误部分与我的Web应用程序分开。publicclassMainpublicst... 查看详情

Auth0/Angular2-Jwt 不适用于 Angular 5

】Auth0/Angular2-Jwt不适用于Angular5【英文标题】：Auth0/Angular2-JwtnotworkingwithAngular5【发布时间】：2018-07-0418:00:47【问题描述】：Angular2-JWT具有我需要使用的特定功能，以便根据存储在localStorage中的记录的用户令牌显示/隐藏链接。token... 查看详情

命令不适用于Powershell中的变量[重复]

】命令不适用于Powershell中的变量[重复]【英文标题】：CommandnotworkingwithvariableinPowershell[duplicate]【发布时间】：2022-01-2322:02:46【问题描述】：我查看了类似的问题，但没有找到适用于此的答案。我也一直在docs.microsoft.com上阅读和... 查看详情

Angular2 动画不适用于 ngIf

】Angular2动画不适用于ngIf【英文标题】：Angular2animatedoesn\'tworkwithngIf【发布时间】：2017-02-2203:14:28【问题描述】：<div*ngIf="clientTable"[@clientTableState]="testAnimate.state"class="clientdata"><divclass="table-holder"><table 查看详情

文本选择不适用于单个单元格 - ng2-table

...ng2-table【发布时间】：2017-09-1012:21:00【问题描述】：这是angular2的数据表，由Valor软件编写。http://valor-software.com/ng2-table/这是演示。我尝试通过鼠标单击并拖动来选择单个单元格中的文本（！重要-在单个单元格内。在多个单元格 查看详情