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

base64でAngular2の文字列をエンコードまたはデコードする方法??? 私のフロントエンドツールはAngular2です。APIに渡す前にパスワード文字列を持っていたので、base64でエンコードする必要があります。サービス中なので、base64でエンコードされた文字列がデコードされます。 だから私はAngular2 / Typescriptといくつかのオプションのためのいくつかのbase64エンコード/デコードライブラリを探しています。 ありがとう!!!

88 angular  typescript  npm-install 

すべてのフォームのフィールドをタッチ済みとしてマークする方法を見つけるのに苦労しています。主な問題は、フィールドに触れずにフォームを送信しようとすると、検証エラーが表示されないことです。コントローラにそのコードのプレースホルダーがあります。 私の考えは単純です： ユーザーが送信ボタンをクリックする すべてのフィールドがタッチ済みとしてマークされます エラーフォーマッタが再実行され、検証エラーが表示されます 新しい方法を実装せずに、送信時にエラーを表示する方法について他のアイデアがある場合は、それらを共有してください。ありがとう！ 私の簡略化された形式： <form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit(form.value)"> <input type="text" id="title" class="form-control" formControlName="title"> <span class="help-block" *ngIf="formErrors.title">{{ formErrors.title }}</span> <button>Submit</button> </form> そして私のコントローラー： import {Component, OnInit} from '@angular/core'; import {FormGroup, FormBuilder, Validators} from '@angular/forms'; @Component({ selector : 'pastebin-root', templateUrl: './app.component.html', styleUrls : ['./app.component.css'] }) export class AppComponent implements OnInit …

88 angular  angular-reactive-forms  angular2-forms  angular2-formbuilder 

追加したい App Settingsいくつかの定数と事前定義された値を含むセクションをアプリます。 を使用するこの回答はすでに読んでいますOpaqueTokenが、Angularでは非推奨です。この記事では違いについて説明しますが、完全な例は提供されておらず、私の試みは失敗しました。 これが私が試したことです（それが正しい方法かどうかはわかりません）： //ServiceAppSettings.ts import {InjectionToken, OpaqueToken} from "@angular/core"; const CONFIG = { apiUrl: 'http://my.api.com', theme: 'suicid-squad', title: 'My awesome app' }; const FEATURE_ENABLED = true; const API_URL = new InjectionToken<string>('apiUrl'); そして、これは私がそれらの定数を使用したいコンポーネントです： //MainPage.ts import {...} from '@angular/core' import {ServiceTest} from "./ServiceTest" @Component({ selector: 'my-app', template: ` <span>Hi</span> ` …

87 javascript  angular 

簡単な質問です。 $ document.ready（）に相当するAngular2が起動されたときにスクリプトを実行したいと思います。これを達成するための最良の方法は何ですか？ スクリプトを最後に配置しようindex.htmlとしましたが、わかったように、これは機能しません。なんらかのコンポーネント宣言をしなければならないと思いますか？ .jsファイルからスクリプトのロードを実行することは可能ですか？ 編集-コード： 次のjsおよびcssプラグインをアプリケーションに挿入しました（Foundry htmlテーマから）。 <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> ... <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/flexslider.min.js"></script> ... <script src="js/scripts.js"></script> //This initiates all the plugins 前述のように、scripts.jsはすべてを「インスタンス化」するため、Angularの準備ができた後に実行する必要があります。script.js 動作しました： import {Component, AfterViewInit} from 'angular2/core'; @Component({ selector: 'home', templateUrl: './components/home/home.html' }) export class …

87 angular 

FormBuilder内にフォーム配列があり、フォームを動的に変更しています。つまり、アプリケーション1からデータをロードするなどです。 私が抱えている問題は、すべてのデータが読み込まれるが、FormArrayのデータは残り、古いアイテムを新しいアイテムと連結するだけであるということです。 そのFormArrayをクリアして、新しいアイテムのみを含めるにはどうすればよいですか。 私はこれを試しました const control2 = <FormArray>this.registerForm.controls['other_Partners']; control2.setValue([]); しかし、それは機能しません。 何か案は？ ngOnInit(): void { this.route.params.subscribe(params => { if (params['id']) { this.id = Number.parseInt(params['id']); } else { this.id = null;} }); if (this.id != null && this.id != NaN) { alert(this.id); this.editApplication(); this.getApplication(this.id); } else { this.newApplication(); } } onSelect(Editedapplication: Application) …

87 angular  angular2-forms 

MyService.service.tsMyComponent.component.tsおよびMyComponent.component.htmlで使用するTypescriptを使用して列挙型を作成しました。 export enum ConnectionResult { Success, Failed } MyService.service.tsから定義済みの列挙型変数を簡単に取得して比較できます。 this.result = this.myService.getConnectionResult(); switch(this.result) { case ConnectionResult.Failed: doSomething(); break; case ConnectionResult.Success: doSomething(); break; } また、* ngIfステートメントを使用して、HTML内の比較に列挙型を使用したいと思いました。 <div *ngIf="result == ConnectionResult.Success; else failed"> <img src="../../assets/connection-success.png" height="300px" class="image-sign-style" /> </div> <ng-template #failed> <img src="../../assets/connection-failed.png" height="300px" class="image-sign-style" /> </ng-template> コードはコンパイルされますが、ブラウザでエラーが発生します。 未定義のプロパティを読み取ることができません 次のhtml表示エラー行があります。 列挙型にこのようにアプローチできない理由を誰かが知っていますか？

87 html  angular  typescript  enums 

PHPとJavaでは次のことができます case 1: case 2: echo "something"; 値が1または2の場合、「何か」が画面に出力されるように、角度のあるアプリケーションを構築しています。次のようなことをしています。 <div [ngSwitch]="data.type"> <div *ngSwitchCase="'multi-choice'">FORM 1</div> <div *ngSwitchCase="'singe-choice'">FORM 1</div> <div *ngSwitchCase="'range'">FORM 2</div> </div> 単一選択に使用されるフォームは複数選択にも使用できますが、より整理しやすくするために以下のようなものを試しました <div [ngSwitch]="data.type"> <div *ngSwitchCase="'multi-choice' || 'singe-choice'">FORM 1</div> </div> 私の不運はうまくいきませんでした、誰かがこれを行うためのより良い方法を提案できますか？

87 angular 

Angular 2で、入力フィールド（テキストボックス）をマスクして、アルファベット文字ではなく数字のみを受け入れるようにするにはどうすればよいですか？ 次のHTML入力があります。 <input type="text" *ngSwitchDefault class="form-control" (change)="onInputChange()" [(ngModel)]="config.Value" (focus)="handleFocus($event)" (blur)="handleBlur($event)" /> 上記の入力は一般的なテキスト入力であり、単純なテキストフィールドとして、またはたとえば年を示すための数値フィールドとして使用できます。 Angular 2を使用して、同じ入力コントロールを使用し、このフィールドにある種のフィルター/マスクを適用して、数値のみを受け入れるようにするにはどうすればよいですか？ これを達成するためのさまざまな方法は何ですか？ 注：入力番号タイプを使用せずに、テキストボックスのみを使用してこれを実現する必要があります。

87 html  angular  input  angularjs-directive 

ルート const appRoutes: Routes = [ { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'}, { path: 'companies/:bank', component: BanksComponent }, { path: '**', redirectTo: '/companies/unionbank' } ] 成分 const NAVBAR = [ { name: 'Banks', submenu: [ { routelink: '/companies/unionbank', name: 'Union Bank' }, { routelink: '/companies/metrobank', name: 'Metro Bank' }, …

87 angular  angular2-routing 

Angular2を使い始めたばかりです。 Angular 2のコンポーネントとディレクティブの違いは何ですか？

86 angular  components  angular-directive  angular2-directives 

angular-cli ng serve地元のdevのサーバー、それは私のプロジェクトディレクトリからすべての静的ファイルを提供しています。 AJAX呼び出しを別のサーバーにプロキシするにはどうすればよいですか？

86 angular  angular-cli 

Angular 2でテストするときに、TestBedで非同期関数を使用するのはいつですか？ いつ使うの？ beforeEach(() => { TestBed.configureTestingModule({ declarations: [MyModule], schemas: [NO_ERRORS_SCHEMA], }); }); そして、いつこれを使用しますか？ beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [MyModule], schemas: [NO_ERRORS_SCHEMA], }); })); 誰かがこれについて私に教えてもらえますか？

86 angular  unit-testing  karma-jasmine  angular2-testing  angular-test 

プロジェクトでmd-tableを使い始めましたが、列幅を固定したいと思っています。現在、すべての列の幅は同じサイズに分割されています。 データテーブルのディメンションのドキュメントはどこで入手できますか？ https://material.angular.io/components/table/overview

86 angular 

angle2のコンポーネントに文字列値を渡したいのですが、デフォルトのバインディングでは機能しません。私はこれに似た何かを考えています： <component [inputField]="string"></component> 残念ながら、割り当ての右側では式のみが許可されています。これを行う方法はありますか？

86 angular  angular2-template 

複数の独立したHTTPインターセプターをAngular4アプリケーションに追加するにはどうすればよいですか？ providers複数のインターセプターで配列を拡張して、それらを追加しようとしました。ただし、実際に実行されるのは最後の1つだけであり、Interceptor1無視されます。 @NgModule({ declarations: [ /* ... */ ], imports: [ /* ... */ HttpModule ], providers: [ { provide: Http, useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) => new Interceptor1(xhrBackend, requestOptions), deps: [XHRBackend, RequestOptions], }, { provide: Http, useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions) => new Interceptor2(xhrBackend, requestOptions), deps: [XHRBackend, RequestOptions] }, …

86 angular  http  interceptor  angular-http-interceptors