TypeScript - Angular4 の ngOnInit() に引数を渡すデコレーターメソッドの作成

デコレーターを使用して、Angular4のリアクティブフォームにバリデーション目的でバリデータメソッドを渡そうとしています。

コンポーネント

@AutoUnsubscribe( [] ) @Component( { selector: 'pim-mat-input', template: ` <form autocomplete = 'off'

続きを読む →

angular - Angular2、ブラウザページをリロードするとURLがデコードされる ['=' が '%3D' に]

この問題のためにすでに多く調査しましたが、まだ何も見つかっていません。リンクをクリックしてウェブアプリケーションを使用する場合、ブラウザは問題なくリダイレクトします。しかし、F5キーやリロードボタンを押してブラウザをリロードすると、URLがデコードされ、次のように変わってしまいます

http://localhost:4200/#/kalender;kuerzel=name/list を http://localhost:4200/#/kalender;kuerzel%3Dname/list

次のエラーを引き起こす:

エラー: キャッチされない（プロミス内）: エラー: ルートに一致するものがありません。URL セグメント: 'kalender;kuerzel%3Dname/list'

それがリンクを生成しているコードの部分です:

... else { this.router.

続きを読む →

TypeScript - Angular 4 イベントデリゲーション

私は、CSSでアイコンを保持している疑似要素（::after）のクリックイベントを検出する必要があります。この疑似要素は<select> HTML要素の兄弟であり、その<select>内のすべての<option>を開く/切り替える/表示します。

私はクリックイベントを親要素に伝播させ、this.selectDropdown.nativeElement.focus(); を使用して <select> 上でフォーカスイベントをトリガーしています。

追伸: 型が ElementRef の selectDropdown は @ViewChild('selectDropdown') でデコレートされ、<select #selectDropdown> に配置されています。

みなさん、何かアイデ

続きを読む →

html - Angular 2でフォームによって値を編集する

モーダルフォームで値を更新する際に問題があります。保存をクリックしたときに入力値を更新したいのですが、何かを書いてウィンドウを閉じるときに更新されます。これが私のコードです：

modal-edit.html:

<div class="container"> <div class="modal fade" id="editForm" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <b

続きを読む →

javascript - Angular (2+) で子コンポーネントの ChangeDetectorRef を取得するにはどうすればいいですか？

このコンポーネント構造が与えられた場合:

<slider> <slide></slide> <slide></slide> <slide></slide> <slide></slide> </slider>

Sliderで全てのSlideのChangeDetectorRefを取得することは可能ですか？

表示されているかどうかに基づいてスライド上の変更検出器をデタッチ/再アタッチしたいと思います。質問のために、Slide コンポーネントはブラックボックスであると仮定します。そうでなければ、@Input() isDetached: boolean を使って実装するのはかなり簡単です。

Angular 2以上

続きを読む →

typescript - Angular 4 コンポーネントで変数をどこで初期化するか - ExpressionChangedAfterItHasBeenCheckedError

私はブール変数を持つAngular 4コンポーネントを持っています。初期値は入力ストリームによって決まります。

TypeScriptは、以下の例のように変数を宣言することを求めます。これがないと、this.isLoadingでエラーが発生します。

この時点ではまだその値がわからないので、変数に代入せずにただ宣言するだけです。

export class SomeComponent implements OnInit { @Input() someStrea

続きを読む →

angular - Angular2 の MatTable の行のセル間でデータを共有する

私は多くのマテリアルデザインのテーブルを使用して、Angularでアプリケーションを開発しています。

さて、これらのテーブルのいくつかではデータを編集することができますので、私にはいくつかの行があり、それぞれの行にはいくつかのフィールドを持つ一連の列があり、最後の列にはデータへの変更を適用するか最初の状態に戻すことができるボタンがあります。

機能はかなりうまく動作していて、データの編集も問題なく行えます。現在は、データにバリデーションを追加し、mat-hint と mat-error を使って入力欄の下にヒントやエラーを表示することでユーザー体験を向上させようと考えています。

問題は、行のフィールドのいずれかが無効な場合に「送信」ボタンを無効にできないことです。

アプリケーションの他の部分でテーブルがなかった場所では、私が行ったことは次の通りです:

<form #form="ngForm"> <mat-form-field>

続きを読む →

TypeScript - Angularにおけるジェネリックコンポーネント

私は、ルーターによってマウントされる汎用ダイアログコンポーネント（@angular/materialをベースにしたもの）を作成しようとしています。

例：MaterialDialog がジェネリックなしでどのように動作するか

import { Component, OnInit } from '@angular/core'; import { MdDialog, MdDialogRef } from '@angular/material'; import { ConcreteComponent } from '../concrete/concrete.component'; @Component({ selector: 'wrapping-component', template: '<div></div>', styleUrls: [], }) export class WrappingComponent implements OnInit { private ref: MdDialogRef<

続きを読む →

mongodb - 定義されていないオブジェクトの値に対する Angular2 FormGroup の patchValue エラー

私が解決しようとしている問題は、HTTPリクエストとフォームグループに関連しています。編集ページのフォームに既存の値をパッチしようとしています。

エラーは、値がデータベース（mongoDB）に存在しない場合に発生します。その値は、追加されたオブジェクトにのみ存在します。以下のコードは、私のリクエスト、formgroup、およびpatchValueです。

this.takeawayService.getByName(this.id).subscribe(data => { this.takeaway = data.takeaway[0]; console.log(this.takeaway); this.formData = this.fb.group({ address : ['', Validators.required], city : ['', Validators.requir

続きを読む →

css - Angular 4: styleUrls が正しく動作しない

Angular 4で奇妙な挙動に出くわしました。次のコンポーネントがあります:

@Component({ selector: 'user-wallets', templateUrl: './user-wallets.component.html', styleUrls: [ './user-wallets.scss' ] }) export class UserWalletsComponent implements OnInit, OnDestroy { <!-- component logic... --> }

そのテンプレートには次のマークアップがあります:

<div class="user-wallets"> <h2> <span jhiTranslate="coinlenderApp.userWallets.home.title">Wallets</s

続きを読む →