我注意到如果我禁用Angular 2反应形式的控件,那么控件不会包含在form.value中.例如,如果我定义我的表单如下:
this.notelinkingForm = new FormGroup({
Enabled: new FormControl(settings.Enabled, Validators.required),
LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});
Run Code Online (Sandbox Code Playgroud)
并检查this.notelinkingForm.value,如果启用了所有控件,则输出将为:
{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}
Run Code Online (Sandbox Code Playgroud)
但是,当某些控件被禁用时,它将是:
{"Enabled":true}
Run Code Online (Sandbox Code Playgroud)
请注意如何排除禁用的控件.
我的意图是,当表单更改时,我希望能够将form.value与其中的所有属性一起传递给我的rest API.如果它不包含禁用的项目,这显然是不可能的.
我在这里遗漏了什么或这是预期的行为吗?有没有办法告诉Angular在form.value中包含禁用的项目?
欢迎你的想法.
我刚刚将我在RC5上构建的应用程序升级到最终版本,而且我对我现在应该声明指令和管道的方式感到困惑.我收到这个错误:
ERROR在[默认] C:\ xampp\htdocs\meriem-car\public\src\app\components\administration.component.ts:12:4类型'{moduleId:string; selector:string; 指令:typeof LoginComponent []; templateUrl:string; }'不能分配给'Component'类型的参数.对象文字只能指定已知属性,"组件"类型中不存在"指令".
我尝试导入FromGroup,FormBuilder并对FormControl我CustomModule:
import { FormsModule, FormGroup } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
FormGroup
]
})
Run Code Online (Sandbox Code Playgroud)
但它抛出一个错误:
EXCEPTION:未捕获(在承诺中):错误:模块'CustomModule'导入的意外值'FormGroup'
如果我只导入FormsModule它工作正常.
有任何想法吗?
当用户点击视频区域本身时,我想以编程方式从TypeScript开始播放HTML视频.
这是我的HTML代码:
<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
<source src="{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>
Run Code Online (Sandbox Code Playgroud)
这是我的TypeScript代码:
@ViewChild('videoPlayer') videoplayer: any;
toggleVideo(event: any) {
this.videoplayer.play();
}
Run Code Online (Sandbox Code Playgroud)
问题是我得到一个错误,表示play()函数未定义/存在.这可能是什么错误?
我在视图中有三个按钮,在页面加载时我显示第一个按钮内容.单击按钮后,该按钮将变为活动状态,但在页面加载时,初始按钮不会设置为活动状态.为了显示第一个按钮激活,我将其添加到div:
[ngClass]="'active'"
Run Code Online (Sandbox Code Playgroud)
现在的问题是,当单击另一个按钮时,第一个按钮保持活动类.我正在评估基于字符串显示的数据.点击每个按钮后,字符串会发生变化.
如何添加条件来检查当前字符串?因此,如果字符串与显示的当前数据匹配,那么将活动类添加到此按钮?
所以这就是我要找的东西:
[ngClass]="'active'" if "myString == ThisIsActiveString;
Run Code Online (Sandbox Code Playgroud)
这是我当前的按钮,但是当我用这种语法添加它时,不会添加该类:
<button [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>
Run Code Online (Sandbox Code Playgroud)
要清楚,字符串在页面加载时默认为"EQUIFAX".
这基于答案:
<button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>
Run Code Online (Sandbox Code Playgroud) javascript typescript angular2-directives angular2-template angular
我是angular2和打字稿的新手,已经花了半天的时间来弄清楚ng2表格.我已完成所有路线并构建了所有必要的表格,目前正在尝试了解如何使用打字稿在angular2中发布
这是我的错误:
[default]中的错误simpleapp/src/app/clients/add-client/add-client.component.ts:52:16属性'http'在'AddClientComponent'类型中不存在.
而且我找不到这个问题来自哪里.我已经angular/http在我的组件中导入了,我提供了标题和响应作为官方教程说但仍然可以看到这个问题.我错过了什么,我的问题在哪里?提前致谢
这是我的组成部分:
import 'rxjs/add/operator/map';
import {Component} from '@angular/core';
import {Http, Response, RequestOptions, Headers} from '@angular/http';
import {Employee} from "./model/add-client.model";
@Component({
selector: 'app-add-client',
templateUrl: 'add-client.component.html',
styleUrls: ['add-client.component.css']
})
export class AddClientComponent {
departments: Array<any>;
firstName: '';
lastName: '';
id: null;
salary: null;
phone: null;
departmentId: null;
constructor(http: Http) {
http.get('api/departments')
.map((res: Response) => res.json())
.subscribe((departments: Array<any>) => this.departments = departments);
}
model = new Employee(
this.id,
this.firstName,
this.lastName,
this.salary,
this.departmentId,
this.phone
);
submitted = …Run Code Online (Sandbox Code Playgroud) 我无法使指令在延迟加载的模块中工作.我已经阅读了文档,我只是将指令添加到主模块的声明数组中.该指令在该模块中按预期工作,但它在延迟加载的模块中不起作用.它甚至可以防止因模板错误而打开延迟加载的模块:
Can't bind to 'myHighlight' since it isn't a known property of 'p'
Run Code Online (Sandbox Code Playgroud)
这是我的Plunker.
点击"转到孩子"后查看控制台中的错误
我正在尝试使用NgStyle带有对象变量的指令,如下所示:
@Component({
template: `
<div [ngStyle]="object">
some test text
</div>`
})
export class example {
private object: string = "{background-color: 'white'}";
}
Run Code Online (Sandbox Code Playgroud)
我也试图与object = "background-color: 'red'"和[ngStyle]="{object}",但似乎这是行不通的.我收到消息错误:
错误:未捕获(在承诺中):由以下原因引起的错误:找不到支持对象'{color:'white'}'(...)consoleError @ VM1051 zone.js@0.6.21?main = browser:346_loop_1 @ VM1051 zone. js@0.6.21?main = browser:371drainMicroTaskQueue @ VM1051 zone.js@0.6.21?main = browser:375ZoneTask.invoke @ VM1051 zone.js@0.6.21?main = browser:297
我究竟做错了什么?
我正在构建一个Angular 2应用程序,它有一个侧导航栏,用于宽度超过500的屏幕,以及一个底部导航栏,用于宽度小于500的屏幕.现在我试图为侧栏指定20%的宽度,80 %到应用内容.
我遇到的问题是路由器插座内容(即实际的应用程序)占用了页面的整个宽度而不是80%.它似乎忽略了我试图给它的任何造型.我们不应该直接设置路由器插座的样式吗?或者也许有一种更好的方式让我俯瞰?
app.component.ts
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="container-fluid">
<nav *ngIf="this.window.innerWidth > 500"></nav>
<router-outlet style="width:80%;float:right;"></router-outlet>
<nav *ngIf="this.window.innerWidth < 500"></nav>
`,
styleUrls: ['app/app.component.css']
})
export class AppComponent {
window = [];
ngOnInit(): void {
this.window.innerWidth = window.innerWidth;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.window.innerWidth = event.target.innerWidth;
console.log(this.window.innerWidth);
}
}
Run Code Online (Sandbox Code Playgroud) 我试图检测HTML何时video以Ionic2(Angular2和Typescript)结束.我的代码片段如下:
模板:
<video poster="" id="v" playsinline autoplay webkit-playsinline onended="vidEnded()">
<source src="assets/vid.mp4" type="video/mp4">
</video>
Run Code Online (Sandbox Code Playgroud)
零件:
vidEnded() {
console.log("video ended");
this.leavePage();
}
Run Code Online (Sandbox Code Playgroud)
我究竟做错了什么?提前致谢.
angular ×10
typescript ×3
angular-pipe ×1
css ×1
forms ×1
html5 ×1
import ×1
javascript ×1
ng-modules ×1