如何更改Angular2中组件的select选项？
在Angular2中更改组件的select选项，可以通过以下步骤实现：
- 在组件的HTML模板中，使用Angular的双向数据绑定语法将select元素与组件的属性绑定起来。例如，可以使用ngModel指令将select的值绑定到组件的一个属性上。
<select [(ngModel)]="selectedOption">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>- 在组件的TypeScript代码中，定义一个属性来存储选中的选项的值。例如，可以在组件类中定义一个名为selectedOption的属性。
selectedOption: string;- 在组件的TypeScript代码中，可以通过修改selectedOption属性的值来更改选中的选项。例如，可以在组件的方法中根据需要更改selectedOption的值。
changeSelectedOption(option: string) {
this.selectedOption = option;
}- 如果需要动态改变select选项的内容，可以在组件的TypeScript代码中定义一个数组来存储选项列表，并在HTML模板中使用ngFor指令循环渲染选项。
options: string[] = ['Option 1', 'Option 2', 'Option 3'];<select [(ngModel)]="selectedOption">
<option *ngFor="let option of options" [value]="option">{{ option }}</option>
</select>以上是更改Angular2中组件的select选项的基本步骤。根据具体的业务需求，可以根据需要进行扩展和优化。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
- 腾讯云直播（CSS）：https://cloud.tencent.com/product/css
相关·内容
我知道AngularJs中的数据绑定概念是一种简单的脏检查机制。在谷歌的I/O视频中，他们说，他们优化了Angular2中的数据绑定/更改检测。它在Angular2中是如何工作的
浏览 0提问于2016-09-20得票数 0
2回答
我正在尝试创建一个父组件和子组件，其中子组件将有一个状态下拉。有人能帮助我理解如何访问父组件中的状态下拉值吗？这是我的代码样本。
/app/app.ts
import {Component} from 'angular2/core'
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common'
import {State} from './state'
@Component({
selector: 'my-app'
浏览 2提问于2016-03-30得票数 4
回答已采纳
这是html：
<md-select placeholder="Veileder {{i+1}}" (change)="updateSupervisorList(i)">
<md-option *ngFor="let supervisor of displayedsupervisorList" >{{supervisor}}</md-option>
</md-select>
这是.ts文件中的方法(displayedsupervisorList是一个有名称
浏览 8提问于2017-01-26得票数 1
回答已采纳
我正在用Angular2在html中显示默认选项select选项，但我不能这样做。
<select name="selectedyear" [disabled]="disabledPeriod" [(ngModel)]="selectedyear" (ngModelChange)="onChangeYear()">
<option name="selectedyear" selected="true" [ngValue]="null"
浏览 0提问于2018-09-26得票数 1
回答已采纳
我有一个使用angularjs的应用程序，我想开始将这个应用程序重写为Angular2。不幸的是，当body和ng-app一样时，最初的应用程序是Asp.Net MVC的混合体。
我想在Angular2中执行类似的方法，将AppComponent选择器设置为body。因此，我将能够一步一步地将旧的应用程序重写为新的组件。
我的问题是模板在组件中是必需的。这是不是有可能没有模板，因为html将从服务器打印？
目前它是这样工作的。当用户点击页面服务器返回html
<html>
<body ng-app="flymark">
Here could be an
浏览 0提问于2017-04-24得票数 1
我试图弄清楚如何侦听angular2中特定元素上的特定事件。
HTML
<div id="hello-world">
Just a random message
</div>
在javascript中，我将其实现为：
document.getElementById("hello-world").addEventListener("mousewheel", (e) => {
console.info(e);
});
不知道在Angular2中实现这一点的正确方法是什么，希望有人能给出答案。
浏览 3提问于2017-04-19得票数 0
我是Angular2和Ionic2的初学者。我正在尝试用Ionic2的Tabs组件构建我自己的小应用程序。
我希望能够使用子页中的一个按钮来更改选项卡。我尝试过使用NavController.setRoot()和NavController.push()，但它们都没有达到预期的行为。
setRoot(Homepage)设置正确的视图，但不会更改选项卡菜单中选定的选项卡。push(Homepage)设置正确的视图，但选项卡菜单已不可见。
我有点困惑，我应该如何与TabsPage (包含标签的@组件)从我的单一页面。
谢谢!
浏览 3提问于2016-07-15得票数 3
回答已采纳
我正在尝试从子组件的父组件获取ElementRef。
@Component({
moduleId: module.id,
selector: 'parent',
templateUrl: 'parent.component.html',
directives: [
Child1Component,
Child2Component
]
})
在Child1Component的html中，我有
<button class="btn btn-primary" #myRef>Select File</button>
浏览 6提问于2016-05-20得票数 4
我想就如何做到以下几点提出一些方向：
我有两个独立的组件：navbar和homepage。
在导航栏中，我有一个city name占位符。
在主页中，我有一个表单组件，其中一个是城市字段。根据我在表单上选择的城市，我想用城市名称更新导航条。
有人能告诉我怎么解决这个问题吗？谢谢你的帮助。
浏览 2提问于2017-06-10得票数 2
回答已采纳
1回答
我正在尝试编写一个自定义指令，如果用户在下拉列表中选择" all“选项，它会自动选择我能够获得的自定义指令中的所有选项，以选择所有选项，但这不会更新消费组件上的模型。
自定义指令
@Directive({ selector: '[selectAll]' })
export class SelectAllDirective {
private selectElement: any;
private selectedItemsd:number[];
constructor(private el: ElementRef) {
this.selectE
浏览 7提问于2016-08-23得票数 0
回答已采纳
我在学角，我有这些部件：
MainComponent.ts
import {Component} from 'angular2/core';
import {UsersTableComponent} from './UsersTableComponent';
import {UserAddComponent} from './UserAddComponent';
@Component({
selector: 'main',
templateUrl: '../app/views/mainView.html&
浏览 0提问于2016-01-19得票数 2
3回答
我有一个与客户打交道的Angular 2应用程序和一个spring rest后端。customer对象有一个customer类型，它也是一个对象，我让customer表单上的下拉列表工作，以便将对象存储为值，但是当现有客户加载到表单中时，我不知道如何选择正确的customer类型。
<select class="form-control" required [(ngModel)]="customer.customerType" >
<option *ngFor="let ct of customerTypes" [ngV
浏览 5提问于2016-06-10得票数 6
回答已采纳
1回答
大家好，我想把选择选项数据从ngFor发送到Ts文件，但是我尝试了attr.value，(ngModelChange) (更改)，所有这些都发送了数据的名称，我只想发送来自ngFor的所有数据
<select [(ngModel)]="event"
class="selectpicker show-menu-arrow form-control show-tick"
data-style="btn-primary" (change)="doSomething(event)">
<option
浏览 0提问于2017-06-30得票数 0
我有一个基本的角度应用程序，包括以下三个组件：
汽车组件，它是主或父组件.
carousel-component ( car-component的子组件，*使用ng-content)
child-component (旋转木马子组件)
子组件中的按钮在单击时使用EventEmitter()发出一个事件。从柱塞中的代码可以看出，car组件(它是主组件或主组件)能够侦听并捕获其子组件(即，在car组件模板中更新的和{text})发出的事件。
然而，carousel-component是子组件的直接父级，它无法捕获相同的事件，并且在旋转木马组件中没有更新文本。
car-compo
浏览 4提问于2017-02-20得票数 1
我正在Angular2应用程序中实现Angular2下拉组件。
<p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" [(ngModel)]="Customer_itm" [ngModelOptions]="{standalone: true}" [style]="{'width':'225px'}" filter="filter" (onChange)="onCusto
浏览 6提问于2017-05-31得票数 10
回答已采纳
我使用的是，而且我遇到了一个问题，即Visual无法识别带有类型记录导入模块的Angular2，这一切都很好：
上面写着：
找不到‘angular2 2/platform/browser’模块
我的应用程序：
是编译没有错误的.ts文件。
它在浏览器中运行，没有错误。
如果我在VS代码中打开项目，它可以正常工作，IDE中没有错误。
我知道类型记录应该直接从node_modules -> angular2 读取.d.ts文件，但是无论如何，我尝试添加angular2，但仍然没有工作。
Atm使用VS 2013更新5，安装了类型记录1.5 (我也尝试了
浏览 6提问于2015-12-21得票数 6
回答已采纳
对于stackoverflow来说，这可能是一个过于简单的问题，但我对anuglar2和ngx-charts非常陌生。
所以我们有了这个简单的线形图组件。
我的问题是，我希望能够禁用动画，也可以更改动画，但我不知道如何做到这一点。如果有任何帮助，我将不胜感激(也可以随时纠正代码约定，我随时都会在这里学习)。
import {Component} from '@angular/core';
import {single, multi, multi2} from '../data';
@Component({
selector: 'app-line-c
浏览 0提问于2017-07-24得票数 1
我正在学习angular2 (我有angular1背景)。在学习Angular2时，我遇到了上面提到的例子。
1)我不理解config.js的用法。此外，我还想了解config.js中使用的"map“对象。
2)我一直在尝试导出用friend.ts文件编写的“朋友”模块。但不知何故，我无法出口，或者我不知道如何出口。看下面的代码，
app.ts
import {bootstrap, Component, CORE_DIRECTIVES} from 'angular2/angular2'
import {FirstComponent} from './first
浏览 3提问于2015-11-30得票数 0
回答已采纳
我使用的是角2 (TypeScript)。为了简单起见，有两个文件：A.ts和B.ts。
如何在A.ts类中使用AAA？谢谢!我花了一天多，但仍然没有成功.
A.ts
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'foo'
})
@View({
template:`
`
})
export class Foo{
AAA:DataClass = new DataClass(); // AAA is here.
}
B.ts
i
浏览 0提问于2015-11-13得票数 0
回答已采纳
我有两个<select>元素：
<select [(ngModel)]="model.SelectedSomeValue">
<option *ngFor="let someValue of model.SomeValues">{{ someValue }}</option>
</select>
<select [(ngModel)]="model.SelectedSomeValue.SelectedOtherValue">
<option *ngFo
浏览 6提问于2016-08-26得票数 0
回答已采纳
我将使用Angular2，并为每个帐户在Angular2上加载内容。
以下URL结构
URL1 http://example.com/account/NICKNAME_1/settings
URL2 http://example.com/account/NICKNAME_1/orders
URL3 http://example.com/account/NICKNAME_2/settings
URL4 http://example.com/account/NICKNAME_2/orders
如果我从URL1到URL3 (或URL3到URL1)，那么ngOnInit不会为settings com
浏览 0提问于2018-05-17得票数 1
回答已采纳
如何以“编写代码的角度”将两个指令或一个指令正确地连接到angular2中的组件(这也是一个指令)
由于关于angular2的文档仍然非常缺乏，因此非常感谢您的任何见解或参考。
这就是每个angular2示例所显示的--通过ngModel绑定到string
@Component({
template: 'Hello <input type="text" [(ngModel)]="myVariable">!'
})
class ExampleComponent() {
myVariable: string = '
浏览 6提问于2016-03-03得票数 2
回答已采纳
我是angular2的新手
我想要创建一个函数，当用户选择一个选项时，将显示所需的表单。
这是我的html code
<label class="col-md-3 form-control-label" for="select">Zone</label>
<div class="col-md-9">
<select class="form-control" id="select" name="select" size="1">
浏览 2提问于2017-04-19得票数 1
回答已采纳
我有以下结构：
<select ngbDropDown class="form-control" id="disk1" required [(ngModel)]="disk1" name="resourceA">
<option *ngFor="let r of disks" [value]="r">{{r.name}}</option>
</select>
我希望将r对象传递给ngModel disk1，它是我的组件中的一个属性：
di
浏览 5提问于2016-09-23得票数 3
在angular2中单击某个按钮时，如何更改该按钮的文本？
例如，将按钮文本从"Save“更改为"Saving...”然后还将其设置为禁用。
我知道如何在AngularJS、jQuery和普通JS中做到这一点，我对如何在Angular2中做到这一点也有一些想法，但我想确保在涉及到Angular2时，我没有以某种过时或令人费解的方式做到这一点。
浏览 1提问于2017-01-05得票数 6
回答已采纳
我目前在angular2工作，我对Angular2的某些方面一无所知，所以我的问题是，我曾经在那里使用jquery加载html模板，响应jquery使用html模板，然后将模板附加到视图中，现在如何在Angular2中实现相同的功能。我的场景是，我有一个类型记录类，它有一个相关的html页面，它处理一个复选框onChange事件，为了成功地响应该事件，我想在当前元素中添加一个HTML。
如何创建动态模板。
如何在我以前创建的类型记录类中使用处理程序将事件绑定到动态创建的模板。
如何在当前html单元格下呈现它。
浏览 8提问于2018-01-11得票数 1
3回答
我正在创建一个调用Facebook javascript api的Facebook服务，并且想知道当我的值更新时如何最好地实现更改检测。
我有一个UserService，它的currentUser属性是一个BehaviorSubject：
currentUser: Subject<User> = new BehaviorSubject<User>(new User(null));
当我想要更新用户以响应facebook javascript sdk告诉我用户已经登录或注销时，我会更新用户并需要在ApplicationRef上调用tick()
updateUser(use
浏览 2提问于2016-02-20得票数 17
我正在尝试将spotfire可视化集成到angular2中。我已经下载了spotfire api javascript ie。spotfireapi.js
我不知道如何在Angular2组件中使用它。我在实例化以下内容时遇到错误：
var customization = new spotfire.webPlayer.Customization();
谁能告诉我在angular2中使用这个第三方应用程序接口的正确方法？
谢谢
浏览 0提问于2017-08-24得票数 1
3回答
我想将角2中的select默认选项设置为"Select选项“。下面是我到目前为止掌握的代码：
<div class="form-group">
<label class="col-md-4 control-label" for="CustomFix">Select an option:</label>
<div class="col-md-4">
浏览 6提问于2016-11-16得票数 1
回答已采纳
1回答
我有一个简单的基于Angular2的web应用程序，与身份验证。我遇到了一个问题，根据用户是否登录，导航栏看起来不同，而且当用户没有登录时，一些组件也不会显示。
例如，当用户单击logout时，导航栏会发生变化，但另一个组件直到页面刷新后才会消失。当按下LogOut按钮时，如何触发元件刷新？
//user.service.ts
logout() {
localStorage.removeItem('id_token');
this.loggedIn = false;
}
//nav.component.ts
import { Component, In
浏览 45提问于2016-03-29得票数 5
我正在制作一个可重用的Angular2组件，我希望用户能够指定一个模板字符串或templateUrl，然后该组件将通过属性或通过某种服务方法设置它。
在角1中，这很简单，我们可以这样做：
// somewhere else in app
myService.setTemplateUrl('path/to/template.html');
// directive definition
function myDirective(myService) {
return {
template: function(element, attrs) {
retu
浏览 4提问于2015-12-17得票数 5
回答已采纳
2回答
如何将变量从模板传递到*ngFor的类型记录。
我将for循环用作：
<select (change)="onregionchange()" data-placeholder="Regions" class="form-control regions-select" id="regions" multiple>
<option *ngFor="let region of all_regions" [value]="region.id">{{region.name}}
浏览 2提问于2017-05-31得票数 1
回答已采纳
我正在开发一个angular 2原型组件。我有两个具有相同选项的选择控件。在第二个选择元素(目标)中，我想禁用或删除在第一个选择元素(原点)中选择的选项。(顺便说一句，您知道为什么会显示第一个选中的选项吗？)
这是
//our root app component
import {Component} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
@Component({
selector: '
浏览 0提问于2016-07-30得票数 2
回答已采纳
在我的NativeScript Angular2项目中，我的设置如下：<ActionBar> <ActionItem text="Select City" color="white"></ActionItem> </ActionBar>
然而，在Android上，文本的颜色总是黑色的。我将如何对这些操作项应用颜色更改？
浏览 4提问于2016-04-22得票数 1
5回答
在角1中，我的配置如下所示：
$routeProvider
.when("/news", {
templateUrl: "newsView.html",
controller: "newsController",
resolve: {
message: function(messageService){
return messageService.getMessage();
}
}
})
如何在Angular2中使用解析？
浏览 5提问于2015-11-01得票数 32
回答已采纳
在我的Angular2应用程序中获取复选框显示默认选项“--请选择--”页面加载时，我遇到了问题。我以前成功地做到了这一点，但在这个特定的例子中，我似乎无法做到这一点。我将展示我的代码，然后解释，正如我所展示的。
以下是我的相关控制器代码：
import {Component} from "@angular/core";
import {ProductService} from "../../services/product.service";
import {Subscription} from "rxjs";
import {Activate
浏览 1提问于2017-02-14得票数 2
回答已采纳
当我使用angular2绑定到元标记属性时，我得到了一些奇怪的结果。例如，如果我有以下绑定。
<meta name="{{x}}">
并且x被解析为"hello"，则HTML输出将为
<hello></hello>
或者，当我添加第二个属性时，它将成为hello标记上的一个属性。我发现了很多关于angular2不能很好地处理元标签的信息，但这个问题很奇怪。你知道是否有可能进行某种绑定吗？
(请注意，我也尝试了其他绑定方法，在其他标签中，元标签只是搞砸了)
代码
@Component({
selector: 'h
浏览 0提问于2016-04-13得票数 0
假设我有以下场景：
@Component({
selector: 'my-app',
template: `
<my-component
[myAttr]="myAttr"
></my-component>
<button (click)="onClick()">Click</button>
`,
directives: [MyComponent]
})
class AppComponent {
myAttr:
浏览 0提问于2016-03-16得票数 2
回答已采纳
我最近开始学习angula2，到目前为止它给人留下了深刻的印象。我没有使用angular1的经验。
我更喜欢在我正在开发的新网站上使用angular2，但唯一的问题是目前缺乏功能丰富、稳定的ui组件，这是公司的政策。
他们有没有用typesctipt和使用组件为中心的设计来编写angular1的指南，比如几个月后很容易升级到angular2？
浏览 2提问于2016-12-15得票数 1
首先，让我明确一下我的问题：
首先，它是这样的:在这里的中，它删除了我的case条件中最后创建的对象。
但是我想像这样分别删除每个条件，请看每一行旁边的红框：
import {Component, OnInit, DynamicComponentLoader, Input} from 'angular2/core';
import {Condition} from './condition';
import {DateCondition} from './datecondition.component';
import {Strin
浏览 0提问于2016-03-16得票数 0
回答已采纳
我正在开发angular2应用程序，其中有一个弹出子组件的父组件。
@ViewChild(childPopupComponent) case: childPopupComponent;
我想做的是:当从子组件(在父组件中弹出)按保存按钮时，重新呈现父组件以进行反射(而不是重新加载整个页面)。
我知道这将重新呈现当前组件，但是如何从@ViewChild one中实现这一点？
this.ref.detectChanges();
浏览 1提问于2017-09-25得票数 3
回答已采纳
2回答
什么会导致Angular2 (rc5)应用程序中的内存泄漏？如何预防呢？
错误/正确的代码示例将非常感谢。
浏览 0提问于2016-08-18得票数 17
回答已采纳
3回答
我用角2编写了两个服务，其中一个是Http的基本定制类，它具有一些自定义功能(目前它看起来是基本的，但它将扩展)：
ServerComms.ts
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
@Injectable()
export class ServerComms {
private url = 'myservice.com/service/';
constructor (public http: Http) {
浏览 5提问于2016-04-15得票数 0
回答已采纳
1回答
我正在尝试在表单中创建一组selects，它根据用户所选择的内容(用户必须在selects中顺序地选择)进行直接的更改。
问题主要发生在我的onChange()函数中，因为当用户选择校园时，它似乎没有正确地保存更改。如果用户选择了Campus1，'building‘select应该只显示"2“作为选项，而如果用户选择Campus2，'building’select应该只显示"4”作为选项。
另外，我也不知道我的方法是否正确，因为我现在只是在摆弄，但是当这个方法生效时，我希望这个应用程序能够完成以下操作：
从我们在我的工作场所拥有的API中获取场所(校园、建筑
浏览 0提问于2017-12-04得票数 0
回答已采纳
3回答
我需要一些关于服务和组件属性之间的绑定以及angular2中的数据绑定的说明
假设我有一个服务(单例)和一个组件
export class Service {
name = "Luke";
object = {id:1};
getName(){return this.name};
getObject(){return this.object};
}
export class Component implements OnInit{
name:string;
object:any;
constructor(private _service:Service){}
浏览 0提问于2016-04-06得票数 6
回答已采纳
在angular2中，它面临选择选项的问题。它不是由default.It选择和显示的，而是在IE浏览器中工作，而在其他浏览器中不工作。
country.html：
<label class="control-label col-sm-offset-1 col-sm-2 bodySmall" for="country">Country:</label>
<div class="col-sm-3" [ngClass]="{ 'has-error': countr
浏览 0提问于2017-04-10得票数 3
回答已采纳
angular2如何执行更改检测默认策略？我已经看过一些与变更检测相关的帖子，得到了一些细节，比如“angular2为每个组件创建变更检测器”。
现在举个例子，如果我有4个组件(comp1、comp2、comp3和comp4)，而我更改了comp4属性，那么是通过所有组件还是单个组件执行更改检测呢？
你能提供一些与上述信息相关的代码教程链接吗？
浏览 0提问于2017-08-21得票数 3
我最近启动了web dev。尤其是angular2。我必须说这个框架太棒了！
但我有一个挑战，我想不出如何以最好的方式解决：
我想用angular2 (数据模型、公共服务等)构建我的web应用程序。但对于“主要区域屏幕”模板，我想用svg设计，用所见即所得绘制静态线条和圆圈等。然后，我想将所有不同的角度组件嵌入到这些“主区域屏幕”svg页面中。这是因为我们的布局不是典型的网格样式，需要在静态svg背景上以“像素精度”放置不同的组件。
我在网上搜索了不同的方法，但似乎没有一种方法能解决我的挑战。
是否可以在svg中嵌入angular2组件，然后将svg添加到angular模板中？
浏览 1提问于2016-06-30得票数 1
给定一个页面部分的模型，该部分包含多个字段，并将填充如下所示的数据：
{
"fields": [
{
"id": 1,
"type": "text",
"caption": "Name",
"value": "Bob"
},
{
"id": 2,
"
浏览 10提问于2015-06-18得票数 52
我正在使用，并试图创建尽可能接近于此的内容：
我编写的select的原始样式(没有来自选择库的customStyles函数)给了我如下所示：
但是，当我开始从(customStyles选择库中添加 函数时，如下所示：
import { useEffect, useState } from 'react';
// styled components
import styled from 'styled-components';
// icons
import { IoIosArrowDown } from 'react-icons/io&#
浏览 3提问于2021-09-14得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
