タグ付けされた質問 「angular」

ソートヘッダー付きの通常のAngularMaterial 2DataTableがあります。すべてのソートはヘッダーが正常に機能します。値としてオブジェクトを持つものを除いて。これらはまったくソートされません。 例えば： <!-- Project Column - This should sort!--> <ng-container matColumnDef="project.name"> <mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell> </ng-container> 注意してください element.project.name displayColumnの構成は次のとおりです。 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol']; に変更'project.name'し'project'ても機能しません"project['name']" 何が足りないのですか？これも可能ですか？ Stackblitzは次のとおりです。AngularMaterial2DataTable ソートオブジェクト 編集： すべての回答をありがとう。私はすでにそれを動的データで動作させています。したがって、ネストされた新しいプロパティごとにswitchステートメントを追加する必要はありません。 これが私の解決策です：（MatTableDataSourceを拡張する新しいデータソースを作成する必要はありません） export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> { sortingDataAccessor: ((data: WorkingHours, …

83 angular  angular-material2 

同じテンプレートに複数のルーターアウトレットを含めることは可能ですか？ はいの場合、ルートを構成する方法は？ 私はangular2ベータを使用しています。

83 angular  angular2-routing  angular2-template 

プロジェクトをAngular6にアップグレードしましたが、.angular-cli.jsonファイルの変換を除いてすべてうまくいきました。私が従ったガイドから、これはそれを自動的に変換すると言われました。 npm install -g @ angular / cli npm install @ angular / cli ng update @ angular / cli しかし、私はまだ古いものを持っているので、そうではありませんでした .angular-cli.json 自動/手動で行う方法はありますか？

83 angular 

私はAngularCookieを探し回っていましたが、AngularでCookie管理を実装する方法を見つけることができませんでした。Cookieを管理する方法はありますか（AngularJSの$ cookieなど）？

83 javascript  angular  typescript 

Angular2ルーターガードを使用して、アプリの一部のページへのアクセスを制限しようとしています。Firebase認証を使用しています。ユーザーがFirebaseでログインしているかどうかを確認するには、コールバックを使用.subscribe()してFirebaseAuthオブジェクトを呼び出す必要があります。これはガードのコードです： import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AngularFireAuth } from "angularfire2/angularfire2"; import { Injectable } from "@angular/core"; import { Observable } from "rxjs/Rx"; @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AngularFireAuth, private router: Router) {} canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean { this.auth.subscribe((auth) => { if (auth) …

83 typescript  angular  angular2-routing 

次のようなファイル構造を含むangular.ioWebサイトからの5分のクイックスタートを使用しています。 angular2-quickstart app app.component.ts boot.ts index.html license.md package.json tsconfig.json tsconfig.jsonは次のようなコードブロックです： { "compilerOptions": { "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] } また、package.json： { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", …

82 javascript  json  angular 

フォームを含むモーダルがあります。モーダルが破棄されると、コンソールに次のエラーが表示されます。 フォームが接続されていないため、フォームの送信がキャンセルされました モーダルは、私の最上位<modal-placeholder>要素である、の直接の子である要素に追加され<app-root>ます。 DOMからフォームを削除し、Angular 2でこのエラーを取り除く正しい方法は何ですか？私は現在使用していますcomponentRef.destroy();

82 javascript  html  angular  forms  angular-forms 

imageオブジェクトの配列をInputデータとして受け取るコンポーネントがあります。 export class ImageGalleryComponent { @Input() images: Image[]; selectedImage: Image; } コンポーネントがロードされるときに、selectedImage値がimages配列の最初のオブジェクトに設定されるようにしたいと思います。私は次のOnInitようなライフサイクルフックでこれを実行しようとしました： export class ImageGalleryComponent implements OnInit { @Input() images: Image[]; selectedImage: Image; ngOnInit() { this.selectedImage = this.images[0]; } } これによりエラーが発生します。Cannot read property '0' of undefinedこれは、imagesこのステージで値が設定されていないことを意味します。OnChangesフックも試しましたが、配列の変化を観察する方法がわからないので行き詰まりました。どうすれば期待した結果を達成できますか？ 親コンポーネントは次のようになります。 @Component({ selector: 'profile-detail', templateUrl: '...', styleUrls: [...], directives: [ImageGalleryComponent] }) export class ProfileDetailComponent …

82 javascript  angular  typescript 

angle2では、別のコントロールが変更されたときに、いくつかのコントロールのバリデーターをトリガーしたいと思います。フォームに再検証するように指示する方法はありますか？さらに良いことに、特定のフィールドの検証をリクエストできますか？ 例：チェックボックスXと入力Pが与えられました。入力Pには、Xのモデル値に基づいて異なる動作をするバリデータがあります。Xがチェック/オフの場合、Pでバリデータを呼び出す必要があります。Pのバリデータはモデルを次のように調べます。 Xの状態を判別し、それに応じてPを検証します。 ここにいくつかのコードがあります： constructor(builder: FormBuilder) { this.formData = { num: '', checkbox: false }; this.formGp = builder.group({ numberFld: [this.formData.num, myValidators.numericRange], checkboxFld: [this.formData.checkbox], }); } this.formGp.controls['checkboxFld'].valueChanges.observer({ next: (value) => { // I want to be able to do something like the following line: this.formGp.controls['numberFld'].validator(this.formGp.controls['numberFld']); } }); 誰かが解決策を持っていますか？ありがとう！

82 forms  validation  angular 

以下に説明するシナリオのAngular2を使用したソリューションを探しています。 このシナリオでは、top-navにはサブモジュールをロードするためのリンクが含まれ、sub-navにはサブモジュールの内容を更新するためのリンクが含まれています。 URLは次のようにマップする必要があります。 / home =>主要コンポーネントルーターアウトレットにホームページをロードします / submodule =>サブモジュールをメインコンポーネントルーターアウトレットにロードし、デフォルトでサブモジュールのホームページとサブナビゲーションバーを表示する必要があります / submodule / feature =>サブモジュールのルーターアウトレット内に機能をロードします アプリモジュール（およびアプリコンポーネント）には、さまざまなサブモジュールに移動するための上部ナビゲーションバーが含まれており、アプリコンポーネントテンプレートは次のようになります。 <top-navbar></top-navbar> <router-outlet></router-outlet> しかし、ここに複雑さがあります。サブモジュールには、2番目のレベルのナビゲーションバーと独自のコンポーネントをロードするための独自のルーターアウトレットを備えた同様のレイアウトが必要です。 <sub-navbar></sub-navbar> <router-outlet name='sub'></router-outlet> 私はすべてのオプションを試し、どこでも検索しましたが、ルーターアウトレットを備えたサブモジュールにデフォルトのテンプレート（アプリコンポーネントなど）を持ち、サブナビゲーションを失うことなく内部ルーターアウトレットにサブモジュールのコンテンツをロードする解決策を見つけることができませんでした。 ご意見やアイデアをいただければ幸いです

82 angular  routing 

私はAngular2とTypeScriptを初めて使用し、ベストプラクティスに従おうとしています。 単純なJavaScriptモデル（{}）を使用する代わりに、TypeScriptクラスを作成しようとしています。 ただし、Angular2はそれを好まないようです。 私のコードは： import { Component, Input } from "@angular/core"; @Component({ selector: "testWidget", template: "<div>This is a test and {{model.param1}} is my param.</div>" }) export class testWidget { constructor(private model: Model) {} } class Model { param1: string; } そして私はそれを次のように使用しています： import { testWidget} from "lib/testWidget"; @Component({ selector: "myComponent", template: …

82 class  typescript  angular 

エンターキーを離すと、次のように機能します。に加えて、他にどのようなオプションがありますか？keyupkeyup.enter <input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

82 javascript  html  onkeyup  angular 

プログラムで要素に対してクリックイベント（またはその他のイベント）を発生させようとしています。言い換えると、angular2のjQuery .trigger（）メソッドによって提供されるのと同様の機能を知りたいのです。 これを行うための組み込みメソッドはありますか？.....そうでない場合は、どうすればこれを行うことができますかを提案してください 次のコードフラグメントを検討してください <form [ngFormModel]="imgUploadFrm" (ngSubmit)="onSubmit(imgUploadFrm)"> <br> <div class="input-field"> <input type="file" id="imgFile" (click)="onChange($event)" > </div> <button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button> </form> ここでは、ユーザーがクリックしたときbtnAddを、それが上のクリックイベント発動すべきであるimgFileを

82 angular  angular2-forms 

Angularドキュメントには、親からの子イベントのリッスンに関するトピックがあります。それはいいです。しかし、私の目的は何か逆です！。私のアプリには、管理ページのレイアウトビュー（サイドバーメニュー、タスクバー、ステータスなど）を保持する「admin.component」があります。この親コンポーネントでは、管理者の他のページ間でメインビューを変更するようにルーターシステムを構成しました。問題は、変更後に保存することです。ユーザーはタスクバー（admin.componentに配置されている）の保存ボタンをクリックし、子コンポーネントは保存スタッフを実行するためにそのクリックイベントをリッスンする必要があります。

82 javascript  typescript  angular  rxjs  eventemitter 

Angular2でサブスクリプションをキャンセルするにはどうすればよいですか？RxJSにはdisposeメソッドがあるようですが、アクセス方法がわかりません。したがって、次のように、EventEmitterにアクセスしてサブスクライブするコードがあります。 var mySubscription = someEventEmitter.subscribe( (val) => { console.log('Received:', val); }, (err) => { console.log('Received error:', err); }, () => { console.log('Completed'); } ); mySubscriptionサブスクリプションをキャンセルするにはどうすればよいですか？

81 javascript  angular  rxjs