2019-12-01から1ヶ月間の記事一覧
以下のコードは、どのような出力になるか? const promise = Promise.reject() promise .then(() => console.log(1)) .catch(() => console.log(2)) .then(() => console.log(3)) .catch(() => console.log(4)) .then(() => console.log(5)) .catch(() => co…
よくあるのが、オブジェクトをresolveし、その中に分岐用のフラグを含める。 まったく美しくない。見ててつらい。 const confess = (iLoveMai) => { console.log(iLoveMai ? '私は白石麻衣を愛しています。' : '私は白石麻衣を愛していません。' ) } const {…
catch()からthen()へ。 そして、then()からcatch()へ。 const promise = Promise.resolve() promise .then(() => { console.log(1) throw new Error() }) .catch(() => { console.log(2) return }) .then(() => { console.log(3) throw new Error() }) .catc…
以下の2つは、書き換えられる。 const foo = () => { return new Promise((resolve, reject) => reject(new Error('foo_value'))) } const bar = async () => { throw new Error('bar_value') } catchで受ける。 foo().catch((err) => console.log(err.messa…
asyncメソッドと似たような考え方でいいと思う。 const promise = new Promise(resolve => resolve()) const foo = promise.then(async () => { await new Promise(resolve => { setTimeout(resolve, 1000) }) return 'foo_value' }) const bar = promise.th…
以下の2つ、Promiseとasyncメソッドは書き換えられる。 foo() { return new Promise((resolve) => { setTimeout(() => { resolve('foo_value') }, 1000) }) } async bar() { await new Promise((resolve) => { setTimeout(resolve, 1000) }) return 'bar_val…
ルーティングの最低限の構成。 /* app-routing.module.ts */ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { FooComponent } from './foo/foo.component'; const routes: Routes = [ { path:…
FormGroup を使わないパターン。 export class AppComponent { foo = new FormControl('foo-desu', [ Validators.required, ]) } <input [formControl]="foo"> <div>value: {{foo.value}}</div> <div>error: {{foo.errors | json}}</div> FormGroup を使うパターン。 export class AppComponent { constructor(…
ngModel経由なら、input要素のvalue, error とも取得できる。 <input #foo="ngModel" [(ngModel)]="metas.foo" required> <div>value: {{foo.value}}</div> <div>error: {{foo.errors?.required}}</div> export class AppComponent { metas = { foo: '', bar: '', baz: '', } } ngForm経由では、input要素のvalueは取得できても、errorは取…
formを使わないバージョン。応用は効かせやすいかも。 <input [(ngModel)]="metas.foo"><br> <input [(ngModel)]="metas.bar"><br> <input [(ngModel)]="metas.baz"><br> <br> <div>disabled: {{disabled}}</div> <button [disabled]="disabled">Submit</button> export class AppComponent { metas = { foo: '', bar: '', baz: '', } get disabled…
Vue.jsに続いて、Angularでも。 テキストフィールドに全て入力完了後、disabledが解除されて送信可能になるボタン。 <form #metaForm="ngForm"> <input name="foo" [(ngModel)]="metas.foo" required><br> <input name="bar" [(ngModel)]="metas.bar" required><br> <input name="baz" [(ngModel)]="metas.baz" required><br> <br> <div>disabled: {{metaForm.invalid}}…</div></form>
Vue.jsに続いて、Angularで全て選択を切り替え。 <input type="checkbox" [(ngModel)]="metas.foo">foo<br> <input type="checkbox" [(ngModel)]="metas.bar">bar<br> <input type="checkbox" [(ngModel)]="metas.baz">baz<br> <br> <input type="checkbox" [(ngModel)]="all_checked">all<br> export class AppComponent { metas = { foo: …