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

私はAngular5を初めて使用し、typescriptに別のマップを含むマップを反復しようとしています。この種のマップの下を角度で繰り返す方法は、コンポーネントのコードです。 import { Component, OnInit} from '@angular/core'; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.css'] }) export class MapComponent implements OnInit { map = new Map<String, Map<String,String>>(); map1 = new Map<String, String>(); constructor() { } ngOnInit() { this.map1.set("sss","sss"); this.map1.set("aaa","sss"); this.map1.set("sass","sss"); this.map1.set("xxx","sss"); this.map1.set("ss","sss"); this.map1.forEach((value: string, key: string) => { console.log(key, value); }); …

109 javascript  angular  typescript  angular-cli 

ng-2の親子データの継承は、私にとって困難でした。 うまく機能する実用的なソリューションであると思われるのは、単一の親IDによって参照される子データのみで構成される配列にデータの全配列をフィルタリングすることです。つまり、データ継承は、1つの親IDによるデータフィルタリングになります。 具体的な例では、次のようになります。books配列をフィルタリングして、特定のの本だけを表示しstore_idます。 import {Component, Input} from 'angular2/core'; export class Store { id: number; name: string; } export class Book { id: number; shop_id: number; title: string; } @Component({ selector: 'book', template:` <p>These books should have a label of the shop: {{shop.id}}:</p> <p *ngFor="#book of booksByShopID">{{book.title}}</p> ` ]) export class …

108 arrays  filter  typescript  angular 

いくつかの失敗したテストだけが出力されます[object ErrorEvent] thrown。問題のコードを特定するのに役立つコンソールに何も表示されません。これらを追跡するために必要なことはありますか？ [編集]：Karma v1.70、Jasmine v2.7.0を実行しています

108 angular  angular-cli  karma-jasmine 

Angular2コンポーネントがあるとしましょう //home.component.ts import { Component } from 'angular2/core'; @Component({ selector: "home", templateUrl: "app/components/templates/home.component.html", styleUrls: ["app/components/styles/home.component.css"] }) export class HomeComponent { public width: Number; public height: Number; } このコンポーネントのテンプレートhtmlファイル //home.component.html <div class="home-component">Some stuff in this div</div> そして最後に、このコンポーネントのcssファイル //home.component.css .home-component{ background-color: red; width: 50px; height: 50px; } ご覧のとおり、クラスには2つのプロパティwidthとがありheightます。幅と高さのcssスタイルを幅と高さのプロパティの値に一致させ、プロパティが更新されると、divの幅と高さが更新されるようにしたいと思います。これを達成する適切な方法は何ですか？

108 css  angular 

私のAngular 2コンポーネントには、Observable配列があります list$: Observable<any[]>; 私のテンプレートには <div *ngIf="list$.length==0">No records found.</div> <div *ngIf="list$.length>0"> <ul> <li *ngFor="let item of list$ | async">item.name</li> </ul> </div> しかし、list $ .lengthは、Observable配列の場合には機能しません。 更新： それはそのようで長さは？。|（非同期リスト$を）：私たちの長さを与えますが、コードの下に、まだ動作しません。 <div> Length: {{(list$ | async)?.length}} <div *ngIf="(list$ | async)?.length>0"> <ul> <li *ngFor="let item of (list$ | async)"> {{item.firstName}} </li> </ul> </div> </div> 誰でも私がObservable配列の長さをチェックする方法を教えてください。

108 angular  observable  angular2-template  angular2-services 

わかりました、多分これは不明確です。このフォームを入手： <form (ngSubmit)="submit()" #crisisForm="ngForm"> <input type="text" name="name" [(ngModel)]="crisis.name"> <button type="submit">Submit</button> <button type="button" (click)="preview()">Preview</button> <button type="reset" (click)="reset()">Reset</button> </form> すべてのボタンがsubmit()機能をトリガーするのはなぜですか？そしてそれを避ける方法は？

107 javascript  forms  angular  submit 

Angular 2アプリのコンポーネントテンプレートでDIVの背景画像を設定したいと思います。しかし、コンソールに次の警告が表示され続け、目的の効果が得られません... Angular2のセキュリティ制限のために動的CSS背景画像がブロックされているのか、HTMLテンプレートが壊れているのかわかりません。 これはコンソールに表示される警告です（img urlを/img/path/is/correct.png次のように変更しました： 警告：安全でないスタイル値のURLをサニタイズします（SafeValueは[property] = binding：/img/path/is/correct.pngを使用する必要があります（http://g.co/ng/security#xssを参照））（http：//を参照）g.co/ng/security#xss）。 問題はDomSanitizationService、Angular2 を使用してテンプレートに注入されたものをサニタイズすることです。テンプレートにあるHTMLは次のとおりです。 <div> <div> <div class="header" *ngIf="image" [style.background-image]="'url(' + image + ')'"> </div> <div class="zone"> <div> <div> <h1 [innerHTML]="header"></h1> </div> <div class="zone__content"> <p *ngFor="let contentSegment of content" [innerHTML]="contentSegment"></p> </div> </div> </div> </div> </div> これがコンポーネントです... Import { DomSanitizationService, SafeHtml, SafeUrl, SafeStyle } from …

107 typescript  angular  xss 

ngIf追加のコンテナー要素なしで使用できますか？ <tr *ngFor="..."> <div *ngIf="..."> ... </div> <div *ngIf="!..."> ... </div> </tr> これはテーブルでは機能しません。HTMLが無効になるためです。

107 html  templates  angular 

<div> <input #ipt type="text"/> </div> コンポーネントクラスからテンプレートアクセス変数にアクセスすることは可能ですか？ つまり、ここにアクセスできますか、 class XComponent{ somefunction(){ //Can I access #ipt here? } }

107 angular  typescript  angular2-template 

パイプは、テンプレート内のデータ（形式）を変換するためのフィルターです。 pipe()以下のような機能に出会いました。pipe()この場合、この機能は正確にはどういう意味ですか？ return this.http.get<Hero>(url) .pipe( tap(_ => this.log(`fetched hero id=${id}`)), catchError(this.handleError<Hero>(`getHero id=${id}`)) );

107 angular  rxjs  angular-pipe  rxjs-pipe 

Angularを7からAngular 8に更新したとき、遅延読み込みモジュールでエラーが発生しました 私は角度アップグレードガイドにあるオプションを試しました 以下の変更を行いました： 前 loadChildren: '../feature/path/sample- tage.module#SameTagModule' 後 loadChildren: () => import('../feature/path/sample- tags.module').then(m => m.CreateLinksModule) エラーTS1323：動的インポートは、「-module」フラグが「commonjs」または「esNext」の場合にのみサポートされます。

107 javascript  angular  typescript  module  angular8 

私はAngularを初めて使用するので、これを行うためのベストプラクティスはわかりません。 angular-cliを使用しng new some-projectて新しいアプリを生成しました。 それは「assets」フォルダに「images」フォルダを作成したので、今私の画像フォルダは src/assets/images でapp.component.html（自分のアプリケーションのルートである）、私が入れ <img class="img-responsive" src="assets/images/myimage.png"> ng serveWebアプリケーションを表示しようとしても、画像が表示されません。 Angularアプリケーションで画像をロードするためのベストプラクティスは何ですか？ 編集：以下の回答を参照してください。実際の画像名にはスペースが使用されていましたが、Angularはそれを好みませんでした。ファイル名のスペースを削除すると、画像が正しく表示されました。

106 html  angular  angular-cli 

Angularのコンポーネントの外側のクリックをどのように検出できますか？

106 html  events  angular  typescript 

私のコード： <li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)"> <template [ngIf]="i<11">{{item.text}}</template> </li> 常に10個のリスト要素のみを表示しようとしています。ここでの回答で示唆されているように、私はngIfを使用しましたが、ページに空のリスト項目（10を超える）が表示されます。

106 angular 

Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'. Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'. Error: Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'. at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] …

106 angular