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

Angular 5でフロントエンドアプリケーションを使用しています。検索ボックスを非表示にする必要がありますが、ボタンをクリックすると、検索ボックスが表示され、フォーカスが移動します。 StackOverflowで見つかったいくつかの方法をディレクティブなどで試しましたが、成功しません。 サンプルコードは次のとおりです。 @Component({ selector: 'my-app', template: ` <div> <h2>Hello</h2> </div> <button (click) ="showSearch()">Show Search</button> <p></p> <form> <div > <input *ngIf="show" #search type="text" /> </div> </form> `, }) export class App implements AfterViewInit { @ViewChild('search') searchElement: ElementRef; show: false; name:string; constructor() { } showSearch(){ this.show = !this.show; this.searchElement.nativeElement.focus(); alert("focus"); …

106 angular  angular5  angular-forms 

Angular2ベータ版がリリースされたばかりですが、公式サイトのチュートリアル（https://angular.io/guide/quickstart）の手順を再現できません。たぶん誰かが同様の問題を抱えていて、これを修正するために何をすべきか知っていますか？npm startコマンドでアプリケーションを起動しようとすると、次のような出力が表示されます。 0 info it worked if it ends with ok 1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ] 2 info using npm@2.7.4 3 info using node@v0.12.2 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info prestart angular2-quickstart@1.0.0 6 info start angular2-quickstart@1.0.0 7 verbose unsafe-perm in lifecycle true 8 …

105 node.js  angular  npm 

このエラーを修正できないようです。検索バーとngForがあります。私はこのようなカスタムパイプを使用して配列をフィルタリングしようとしています： import { Pipe, PipeTransform } from '@angular/core'; import { User } from '../user/user'; @Pipe({ name: 'usersPipe', pure: false }) export class UsersPipe implements PipeTransform { transform(users: User [], searchTerm: string) { return users.filter(user => user.name.indexOf(searchTerm) !== -1); } } 使用法： <input [(ngModel)]="searchTerm" type="text" placeholder="Search users"> <div *ngFor="let user of …

105 angular  angular2-forms  angular2-pipe 

Angular 4からLaravelバックエンドにPOSTリクエストを送信しようとしています。 私のLoginServiceにはこのメソッドがあります： login(email: string, password: string) { return this.http.post(`http://10.0.1.19/login`, { email, password }) } LoginComponentでこのメソッドをサブスクライブします。 .subscribe( (response: any) => { console.log(response) location.reload() }, (error: any) => { console.log(error) }) そして、これは私のLaravelバックエンドメソッドです。 ... if($this->auth->attempt(['email' => $email, 'password' => $password], true)) { return response('Success', 200); } return response('Unauthorized', 401); 私のChrome開発ツールは、私のリクエストは200のステータスコードで成功したと言っています。しかし、私のAngularコードはerrorブロックをトリガーし、次のメッセージを表示します。 http://10.0.1.19/api/loginの解析中のHTTPエラー バックエンドから空の配列を返す場合、それは機能します...それで、Angularは私の応答をJSONとして解析しようとしていますか？これを無効にするにはどうすればよいですか？

105 angular  typescript  angular-httpclient 

mat-table並べ替えをローカルで機能させようとしています。データを期待どおりに表示することはできますが、ヘッダー行をクリックしても、オンラインの例のように並べ替えは行われません（何も起こりません）。このデモをローカルで動作させようとしています：https : //material.angular.io/components/sort/overview https://plnkr.co/edit/XF5VxOSEBxMTd9Yb3ZLA?p=preview Angular CLIを使用して新しいプロジェクトを生成し、次の手順に従いました：https : //material.angular.io/guide/getting-started これが私のローカルファイルです： app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { MatSort, MatTableModule } from '@angular/material'; import { AppComponent } from './app.component'; import { TableSortingExample } from './table-sorting-example'; @NgModule({ declarations: [ AppComponent, TableSortingExample, MatSort ], imports: [ …

105 angular  angular-material 

AppComponentでは、HTMLコードでnavコンポーネントを使用しています。UIは正常に見えます。ng serveを実行してもエラーは発生しません。アプリを見るとコンソールにエラーはありません。 しかし、プロジェクトでKarmaを実行すると、エラーが発生します。 Failed: Template parse errors: 'app-nav' is not a known element: 1. If 'app-nav' is an Angular component, then verify that it is part of this module. 2. If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 私のapp.module.tsで： …

104 javascript  node.js  angular  typescript  karma-jasmine 

同じformControlNameにバインドされたチェックボックスのリストが与えられたformControl場合、単にtrue/ false？ではなく、どのようにバインドされたチェックボックス値の配列を生成できますか？ 例： <form [formGroup]="checkboxGroup"> <input type="checkbox" id="checkbox-1" value="value-1" formControlName="myValues" /> <input type="checkbox" id="checkbox-2" value="value-2" formControlName="myValues" /> <input type="checkbox" id="checkbox-3" value="value-2" formControlName="myValues" /> </form> checkboxGroup.controls['myValues'].value 現在は以下を生成します： true or false 私が作りたいもの： ['value-1', 'value-2', ...]

104 javascript  angular  checkbox  angular2-forms 

私たちは現在、クライアントの1人が毎日使用している定期的な更新を含む新しいプロジェクトに取り組んでいます。このプロジェクトはangular 2を使用して開発されており、私たちはキャッシュの問題に直面しています。つまり、クライアントはマシンの最新の変更を見ていません。 主にjsファイルのhtml / cssファイルは、それほど問題なく適切に更新されるようです。

104 caching  angular  browser-cache  cache-control  angular2-template 

今日、いくつかの基本的なAngularJSイントロを処理しているときに、問題が発生しました。 プロジェクトを開始するためにPowerShellを開きました。NPMは機能しました。 以下を使用してAngularをインストールできました： npm install -g @angular/cli ngを実行しようとすると、次のようになります。 the term 'ng' is not recognized as the name of a cmdlet

104 node.js  angular  powershell  npm  angular-cli 

これがAngular4の私のコンポーネントです： @Component( { selector: 'input-extra-field', template: ` <div class="form-group" [formGroup]="formGroup" > <switch [attr.title]="field.etiquette" [attr.value]="field.valeur" [(ngModel)]="field.valeur" [formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled"> </switch> <error-messages [control]="name"></error-messages> </div> ` } ) これが私のクラスです： export class SwitchExtraField extends ExtraField { @Input() field: ExtraFormField; @Input() entity: { fields: Object }; @Input() formGroup: FormGroup; constructor( formDir: NgForm ) { super( …

104 angular  form-control 

typescriptとsystemjsを使用するクイックスタートチュートリアルがangular.ioにあります。ミニアプリを実行したので、展開可能なものを作成するにはどうすればよいですか？それに関する情報はまったく見つかりませんでした。 System.configに追加のツールや追加の設定が必要ですか？ （webpackを使用して単一のbundle.jsを作成できることはわかっていますが、チュートリアルで使用されているsystemjsを使用したいと思います） 誰かがこのセットアップで構築プロセスを共有できますか（Angular 2、TypeScript、systemjs）

103 typescript  angular  systemjs 

テンプレートでカスタムパイプを使用すると、次のようになります。 {{user|userName}} そして、それはうまくいきます。 コードでパイプを使用することは可能ですか？ 私はそれを次のように使用しようとします： let name = `${user|userName}`; しかし、それは示しています userNameが定義されていません 私の代替方法はdb.collection.findOne()、コードで手動で使用することです。しかし、スマートな方法はありますか？

103 angular  angular-pipe 

*ngForHTML要素を複数回繰り返すにはどうすればよいですか？ 例：メンバー変数が20に割り当てられている場合。* ngForディレクティブを使用してdivを20回繰り返すにはどうすればよいですか？

103 angular 

角度のあるアプリケーションではngOnDestroy()、コンポーネント/ディレクティブのライフサイクルフックがあり、このフックを使用してオブザーバブルをサブスクライブ解除します。 @injectable()サービスで作成されたオブザーバブルをクリア/破壊したい。ngOnDestroy()サービスでも利用できるという投稿をいくつか見ました。 しかし、それは良い習慣であり、それを行う唯一の方法であり、いつ呼び出されるのですか？誰かが明確にしてください。

103 angular  rxjs  observable  angular-services 

私は現在、Angular 4プロジェクトのパスワードリセットページに取り組んでいます。Angular Materialを使用してダイアログを作成していますが、クライアントがダイアログをクリックすると、ダイアログは自動的に閉じます。コード側が「閉じる」関数を呼び出すまでダイアログを閉じないようにする方法はありますか？または、どのようにして閉じることができないモーダルを作成する必要がありますか？

103 angular  dialog  modal-dialog  angular-material