小编Veg*_*ega的帖子

我们想放入一个ng-content内部,*ngFor然后指定ng-content使用包含ngFor的组件的内容.可能吗？

<li *ngFor="let data of dataSource">
  <ng-content></ng-content>
</li>

演示

ETA:我知道有多种方法可以观察我的表单以进行更改.这不是我想要做的.正如标题所说,我在问如何观察对象的变化.下面显示的应用程序仅用于说明目的.请回答我提出的问题.谢谢!

我有这个简单的应用程序:

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

export class Customer {
    firstName: string;
    favoriteColor: string;
}

@Component({
    selector: 'my-app',
    template: `
        <div *ngIf="customer">
            <input type="text" [(ngModel)]="customer.firstName">
            <input type="text" [(ngModel)]="customer.favoriteColor">
        </div>
        `
})
export class AppComponent implements OnInit {

    private customer: Customer;

    ngOnInit(): void {

        this.customer = new Customer();

        // TODO: how can I register a callback that will run whenever
        // any property of this.customer has been changed?

    }

}

注意TODO.我需要注册一个回调,它将在任何属性 this.customer发生变化时运行.

我不能在输入上使用ngChange.我需要直接订阅模型的更改. …

我是Angular 4的新手,并开始使用材料组件,我从官方文档中复制了几个示例,但没有得到与文档相同的结果:

如何更改文本框宽度？我试过style ="width:200px;" 风格= "宽度:100%"; class ="col-md-x"但是没有一个工作,第二件事是如何将登录容器置于页面中间？我在这里找到了一些答案但是它们似乎都没有起作用,这是我的代码:

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
        <md-card>
          <md-card-title>Login</md-card-title>
          <md-card-content>
            <form class="example-form">
              <div>
              <md-form-field class="example-full-width">
                  <input mdInput placeholder="Username" type="text">
              </md-form-field>
              </div>
              <div>
              <md-form-field class="example-full-width">
                <input mdInput placeholder="Password" type="password">
              </md-form-field>
              </div>
            </form>
          </md-card-content>
        </md-card>
      </div>
    </div>  
</div>

**

我们正在开始一个新的Angular2 SPA,我正在研究是否使用Angular快速入门教程(https://angular.io/guide/quickstart)或Webpack(https://angular.io/docs/ts)中所述的SystemJS /latest/guide/webpack.html).

在线研究,人们似乎正在从SystemJS转向Webpack.例如,Google的"Angular CLI"项目:http://react-etc.net/entry/angular-2-cli-moves-from-systemjs-to-webpack

Webpack不仅处理模块,还提供了打包应用程序的方法(concat文件,minify/uglify文件,......).新版本还提供"树摇动"(从最终版本中删除死/未使用的模块).

使用SystemJS,我们仍然需要使用gulp(或其他东西)来构建应用程序.

如果您开始使用新的Angular 2应用程序,您会使用哪一个？

我有如下路由器链接:

<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show'}]">

我想传递参数showTour.但是,当我这样做时,参数是可见的url,我想隐藏它.我已经经历了这么多的引用(关于可选参数的说法),但在我的案例中没有成功.我该怎么解决这个问题？

我正在使用angular-material2的复选框.目前,复选框的默认颜色为紫色.
看起来他们已将复选框的默认颜色从"主要"更改为重音.
有没有办法在没有覆盖css的情况下获得"主要"(绿色)颜色而不是紫色.
我尝试给color ="primary"但是没有用.

代码: <md-checkbox></md-checkbox>

进口声明:

import {MdCheckbox} from '@angular2-material/checkbox';

Plunker http://plnkr.co/edit/sFC0kfdzj7fxtUC3GXdr?p=preview

我有一个奇怪的问题,我的子表单的表单提交事件在我的父表单上触发了两次.

child.component.html

<form [formGroup]="childForm" (ngSubmit)="childFormSubmit()">
  ...
</form>

child.component.ts

@Component({
  selector: 'child-form',
  templateUrl: 'login.component.html',
})

export class ChildComponent {
  @Output() submit = new EventEmitter<any>();

  public childForm: FormGroup;

  childFormSubmit() {
    if (this.childForm.valid) {
      console.log('Child Form Submit')
      this.submit.emit(this.childForm.value);
    }
  }
}

parent.component.html

<child-form (submit)="parentSubmit($event)"></child-form>

parent.component.ts

@Component({
  selector: 'parent',
  templateUrl: 'parent.component.html',
})

export class ParentComponent {

  constructor() {
  }

  parentSubmit(event: any) {
    console.log('Parent Submit');
  }
}

提交子表单会在控制台输出中产生以下结果:

Child Form Submit
Parent Submit
Parent Submit

我正在尝试使用<mat-for-field>和进行验证<mat-error>.当用户选中输入而不填充时,这可以正常工作.但是,如何在单击按钮时强制显示此错误？我没有使用提交.此外,使用模板驱动的表单.

这是我的代码:

HTML:

<mat-form-field>
    <input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" required>
    <mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>

TS:

dueDateValidator: FormControl = new FormControl('', [Validators.required]);

我正在尝试使用材质角度复选框,并将其默认设置为已选中,但它显示为未选中,有什么问题？

<mat-checkbox class = "example-margin" [(ngModel)] = obj.impresora> 
     <label>Printer</label> 
</mat-checkbox>

obj.impresora属性是布尔值

我有休息服务,它返回一个对象集合,其中一个字段是日期字符串(ISO-8601格式),日期值如下

"createdDate":"2017-02-21T12:56:50.907",

在angular4 UI中,我将DatePipe格式化为上述日期

{{resultItem.createdDate | 日期: '短'}}

而且我的错误转换如下: 2017年2月21日,上午7:56

而不是2/21/ 2017,0:56 AM