小编Ste*_*ota的帖子

Angular 2禁用控件不包含在form.value中

我注意到如果我禁用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中包含禁用的项目?

欢迎你的想法.

angular2-forms angular

88
推荐指数
3
解决办法
2万
查看次数

Angular 2.0版本:管道和指令不再是@Component的属性

我刚刚将我在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'类型的参数.对象文字只能指定已知属性,"组件"类型中不存在"指令".

angular-directive angular-pipe angular

18
推荐指数
1
解决办法
1万
查看次数

如何在Angular 2中的NgModule中正确导入FormGroup

我尝试导入FromGroup,FormBuilder并对FormControlCustomModule:

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

@NgModule({
  imports: [
    FormsModule,
    FormGroup
  ]
})
Run Code Online (Sandbox Code Playgroud)

但它抛出一个错误:

EXCEPTION:未捕获(在承诺中):错误:模块'CustomModule'导入的意外值'FormGroup'

如果我只导入FormsModule它工作正常.

有任何想法吗?

import angular2-forms ng-modules angular

17
推荐指数
1
解决办法
3万
查看次数

播放Angular 2 Typescript中的HTML 5视频

当用户点击视频区域本身时,我想以编程方式从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()函数未定义/存在.这可能是什么错误?

html5 angular2-template angular

16
推荐指数
4
解决办法
4万
查看次数

Angular 2改变班级的条件

我在视图中有三个按钮,在页面加载时我显示第一个按钮内容.单击按钮后,该按钮将变为活动状态,但在页面加载时,初始按钮不会设置为活动状态.为了显示第一个按钮激活,我将其添加到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

15
推荐指数
1
解决办法
4万
查看次数

属性'http'在类型'Component',Angular 2上不存在

我是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)

forms typescript angular2-http angular

13
推荐指数
1
解决办法
2万
查看次数

指令在子模块中不起作用

我无法使指令在延迟加载的模块中工作.我已经阅读了文档,我只是将指令添加到主模块的声明数组中.该指令在该模块中按预期工作,但它在延迟加载的模块中不起作用.它甚至可以防止因模板错误而打开延迟加载的模块:

Can't bind to 'myHighlight' since it isn't a known property of 'p'
Run Code Online (Sandbox Code Playgroud)

这是我的Plunker.

点击"转到孩子"后查看控制台中的错误

angular-directive angular-module angular

12
推荐指数
1
解决办法
4002
查看次数

如何在Angular 2中将Object传递给NgStyle指令?

我正在尝试使用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-directive angular

9
推荐指数
2
解决办法
6869
查看次数

角度2:造型路由器出口宽度<100%

我正在构建一个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)

css angular2-template angular

8
推荐指数
3
解决办法
2万
查看次数

检测HTML视频何时以Angular 2结尾

我试图检测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)

我究竟做错了什么?提前致谢.

typescript angular2-template angular

8
推荐指数
2
解决办法
5009
查看次数