Author Archives: yoheimiyamoto

angular ngFor form

<form #myForm="ngForm" (ngSubmit)="show()" novalidate>
  <ng-container *ngFor="let user of users; let i = index" type="text">
    <input id="name" name="name{{i}}" [(ngModel)]="user.name" #name="ngModel" required>
    <span *ngIf="name.errors?.required">名前は必須です。</span>
  </ng-container>
</form>

angular npm エラー

エラー内容

codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.

解決方法

package.json 修正
4.0.1 に変更

 "codelyzer": "~4.0.1",

参考

it seems to work updating codelyzer to the latest version (4.0.1) and using angular/material2-builds angular/cdk-builds… we should wait to update to ng 5 using material 👍

https://github.com/angular/material2/issues/8246

js explorer 対応

for文

// 修正前
for (var u of users){

// 修正後
for( var i=0; i<users.length; i++){

option

// 修正前
var options = e.currentTarget.selectedOptions

// 修正後
var options = [];
for (i = 0; i < e.currentTarget.options.length; i++){
  if (e.currentTarget.options[i].selected){
    options.push(e.currentTarget.options[i])
  }
}

angular tutorial

P860

ngmodule でjsモジュールから取り出した、オブジェクトを束ねる。
束ねたものが、Angularモジュール

model

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}{{user.name}}</h1>`,
})
export class AppComponent  {
  name = 'Angular';
  user: User = {
    id: "1",
    name: "yohei"
  }
}

export class User {
  id: string;
  name: string;
}

インストール

パッケージjsonからインストール

npm install
npm install --production

パッケージJSONにないものをインストール。パッケージJSONにも追加する

npm install {package名} --save
npm install {package名} --save-dev

2.3から