小编dev*_*033的帖子

我最近使用TypeScript观看了Angular 2的教程,但不确定何时使用接口以及何时使用模型来保存数据结构.

界面示例:

export interface IProduct {
    ProductNumber: number;
    ProductName: string;
    ProductDescription: string;
}

型号示例:

export class Product {
    constructor(
        public ProductNumber: number,
        public ProductName: string,
        public ProductDescription: string
    ){}
}

我想从URL加载JSON数据并绑定到接口/模型.有时我想要一个数据对象,其他时候我想要持有对象的数组.

我应该使用哪一个？为什么？

我正在经历forEach loop中AngularJS.有几点我没理解.

1. 迭代器函数有什么用？有没有办法没有它？
2. 键和值的重要性如下所示？

angular.forEach($scope.data, function(value, key){});

PS:我试图在没有参数的情况下运行此函数,但它不起作用.

这是我的json:

[
   {
     "Name": "Thomas",
     "Password": "thomasTheKing"
   },
   {
     "Name": "Linda",
     "Password": "lindatheQueen"
   }
]

我的JavaScript档案:

var app = angular.module('testModule', []);

app.controller('testController', function($scope, $http){
   $http.get('Data/info.json').then(
      function(data){
         $scope.data = data;
      }
   );

   angular.forEach($scope.data, function(value, key){
      if(value.Password == "thomasTheKing")
         console.log("username is thomas");
   });
});

另一个问题:为什么上面的函数没有输入如果条件并在控制台中打印"用户名是托马斯"？

我读过一篇关于属性和属性绑定之间差异的文章.根据我的理解,大多数时候,Angular2更喜欢属性绑定,因为在每次数据更改后,DOM都会更新.(如果我弄错了,请纠正我).

我有一个自定义组件,并从父组件中使用它.在其中,我有一个@Input名字truevalue.当我truevalue通过属性绑定从父级启动时,有时它不会改变.我使用以下代码:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox>

如果我发送true或"1"进入trueValue它工作,但如果我发送 "Y"或"YES",它不起作用.所以我被迫使用属性绑定.我不知道是什么问题.

我已将其更改为以下内容:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" trueValue="Y"></my-checkbox>

提前致谢

我有一个只包含表单的简单组件:

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';


@Component({
  selector: 'test-component',
  directives: [FORM_DIRECTIVES, NgFor],
  template: `
    <form class="form-inline" (ng-submit)="onSubmit()" #form="form">
      <div class="form-group">
        <select class="form-control" 
          [(ng-model)]="model.server" 
          ng-control="server" 
          #server="form" 
          required>
          <option selected hidden>placeholder</option>
          <option *ng-for="#server of servers" 
            [value]="server">{{ server | uppercase }}
          </option>
        </select>
      </div>
      <div class="form-group">
        <input class="btn btn-primary" type="submit" value="Load"
          [disabled]="!form.form.valid">
      </div>
    </form>
  `
})
export class TestComponent {
  public model: Model = new Model();
  public servers: string[] = ['a', 'b', 'c'];

  onSubmit(): void {
    // Complicated logic.

    // Reset form. …

视图:

<TextBlock Text="{Binding Date}"/>

我希望将日期格式化为"dd/MM/yyyy",换句话说,没有时间.

我试过了:<TextBlock Text="{Binding Date, StringFormat={}{0:dd/MM/yyyy}}"/>但它不起作用.

给我一个错误:在'Binding'类型中找不到属性'StringFormat'.

首先,我想简单地在我发送给我的当前对象中获取一个对象back-end.

我有这个简单的JSON(从表单生成):

{
  "name": "Project 1",
  "project_criteria": [
    {
      "name": "Criterium 1",
      "type": "Type 1",
      "benefit": "1"
    },
    {
      "name": "Criterium 2",
      "type": "Type 2",
      "benefit": "3"
    }
  ]
}

我的classes:

class Project < ApplicationRecord
    has_many :project_criteria
    accepts_nested_attributes_for :project_criteria
end

class ProjectCriterium < ApplicationRecord
    belongs_to :project
end

ProjectsController:

def project_params
    params.require(:project).permit(:name,  project_criteria: [] )
end

但我仍然无法访问project_criteria参数,如下所示:

Started POST "/projects" for 127.0.0.1 at 2016-08-19 16:24:03 -0300
Processing by ProjectsController#create as HTML
  Parameters: {"project"=>{"name"=>"Project …

我有以下容器组件

export class EventsComponent {
  data$: Observable<Data[]> = this.store.select(data);
  loading$: Observable<boolean> = this.store.select(loading);
}

并将可观察量绑定| async到表示组件：

 <app-presentational 
   [rowData]="data$ | async" 
   [loading]="loading$ | async" 
   ...

export class PresentComponent {
  @Input()
  rowData: Data[];

  @Input()
  loading: boolean;
}

然而，TS 编译器总是抱怨异步管道可能返回 null。

更新，这是我得到的确切错误

Type 'boolean | null' is not assignable to type 'boolean'.
  Type 'null' is not assignable to type 'boolean'.ngtsc(2322)

那么我真的必须改变我的一切吗@Input()？

export class PresentComponent {
  @Input()
  rowData: Data[] | null;

  @Input()
  loading: boolean | null;
}

无法以与Angular文档相同的方式访问它,因此必须首先获取FormGroup实例并在那里找到FormControl实例.我想知道为什么？这个例子有效:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="myForm.controls.username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

虽然这会引发错误(仅在*ngIf语句中这些差异):

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

无法读取未定义的属性"无效"

form.component:

import {Component} from '@angular/core';
import {FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'sign-up',
  templateUrl: 'app/sign-up.component.html'
})

export class SignUpComponent {

  myForm = new FormGroup({
    username: new FormControl('username', Validators.required),
    password: new FormControl('', Validators.required), …

我正在使用ng-bootstrap datepicker,但是当我保存表单时,日期会被保存为.

date: {
  day: 01,
  month: 12,
  year: 16
}

我希望我能把它当成更像的东西 "2016-11-23T00:39:31.768Z"

这是我的实现:

<div class="input-group">
  <button class="input-group-btn" (click)="d.toggle()" >
    <md-icon svgSrc="assets/images/calendar-plus.svg" style="cursor: pointer;"></md-icon>
  </button>
  <input class="form-control" placeholder="dd-mm-yyyy" name="dp" formControlName="due_date" navigation="arrows" ngbDatepicker #d="ngbDatepicker">
</div>

和form.component:

constructor( private fb: FormBuilder ) {
    this.form = this.fb.group({
      due_date: [''],
    });
  }

我有这个领域:

public decimal Price { get; set; } 在数据库中它是十进制的(7,2).

视图:

 @Html.EditorFor(model => model.Price, 
                 new { htmlAttributes = new { @class = "form-control" } })

如果我用逗号放一个值,MVC默认验证不接受,说:"The field must be a number".(我尝试使用正则表达式,但没办法)

例如: 5,00, 55,00 or 555,00

这个:

public DateTime date { get;set; }

视图:

 @Html.EditorFor(model => model.Date, 
                 new { htmlAttributes = new { @class = "form-control" } })

MVC默认验证不接受格式的日期dd/mm/yyyy,仅在mm/dd/yyyy.

例如: 13/02/2015, 15/06/2013, 25/08/2012

是全球化还是什么？我怎么解决这个问题？