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

私は基本的なコンセプトを持っていると思いますが、いくつかの曖昧さがあります したがって、一般的に、これは私がobservableを使用する方法です： observable.subscribe(x => { }) データをフィルタリングしたい場合は、これを使用できます： import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators'; observable.pipe( map(x => {return x}), first() ).subscribe(x => { }) 私もこれを行うことができます： import 'rxjs/add/operator/map'; import 'rxjs/add/operator/first'; observable.map(x => {return x}).first().subscribe(x => { }) だから私の質問は： 違いはなんですか？ 違いがないのに、なぜ機能パイプが存在するのですか？ これらの関数に異なるインポートが必要なのはなぜですか？

103 angular  rxjs  rxjs5 

ng-contentAngular 6で複数を使用してカスタムコンポーネントを構築しようとしていますが、これが機能せず、理由がわかりません。 これは私のコンポーネントコードです： <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> このコンポーネントを別の場所で使用して、次のような2つの異なるHTMLコードを内部bodyとヘッダーselectにレンダリングしようとしていますng-content。 <div #header>This should be rendered in header selection of ng-content</div> <div #body>This should be rendered in body selection of ng-content</div> しかし、コンポーネントは空白になっています。 私が間違っている可能性があること、または同じコンポーネントで2つの異なるセクションをレンダリングするための最良の方法を知っていますか？ ありがとう！

103 angular  angular6  angular-components  ng-content 

この質問の答えはコミュニティの努力です。この投稿を改善するには、既存の回答を編集してください。現在、新しい回答や相互作用を受け入れていません。 ng --version私が得た使用： @ angular / cli：1.0.0 これは入手可能な最新リリースではありません。 Angular CLIがシステムにグローバルにインストールされているため、アップグレードするために次のことを試しました。 npm update angular-cli -g ただし、バージョン1.0.0のままなので、機能しません。

102 angular  angular-cli 

ngStyleを使用して背景画像を追加する方法 私のコードは動作しません： this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg'; <div [ngStyle]="{'background-image': url(' + photo + ')}"></div>

102 javascript  html  css  angular 

Angular 5でカスタム検証を行おうとしていますが、次のエラーが発生しています Expected validator to return Promise or Observable 値が必要なものと一致しない場合、フォームにエラーを返したいだけです。コードは次のとおりです。 これは私のフォームであるコンポーネントです constructor(fb: FormBuilder, private cadastroService:CadastroService) { this.signUp = fb.group({ "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])], "email": ["", Validators.compose([Validators.required, Validators.email])], "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])], "cpf": ["", Validators.required, ValidateCpf] }) } このコードは、実装したい検証を含むファイルにあります。 import { AbstractControl } from '@angular/forms'; export function ValidateCpf(control: AbstractControl){ if (control.value …

102 javascript  angular  angular5  angular-forms  angular-validation 

私のチームと私は、エンタープライズレベルのWebアプリケーションの開発を開始するための資金を受け取りました（アプリケーションの機能の詳細には触れません）。アプリケーションには多くの個別のWebページがありますが、これらのページのうちの2つはより集中的で非常に重いです-多くのユーザー操作のように重い、大量のデータを表示するモーダル、WebSocket接続、チャットなど。 私はプロジェクトのチーフアーキテクトに割り当てられているので、最新のWebフレームワークについて調査しています。バックエンドについては、いくつかのテストを行い、Azure SQLプラットフォームを使用することを決定しました。これまでのところ、私はCore 2.0を使用したASP.NETに対して行われ、行われている改善を気に入っています。具体的には、ASP.NET MVCの以前のバージョンに対するRazorエンジン。 「新しい」Razor対Angular / Reactなどについて専門家の意見を聞きたかった。特にパフォーマンスに関心があります。Core 2.0 Razorはクライアント側のレンダリングフレームワークにどのように対応しますか？違いは無視できますか？私たちのアプリは、潜在的な1,000,000ユーザー（約100,000同時）をターゲットにしています。 前もって感謝します！

101 asp.net  angular  reactjs  razor 

「ngModel」にバインドできません。「input」要素の既知のプロパティではなく、対応するプロパティを持つ一致するディレクティブがないためです。 注：私はalpha.31を使用しています import { Component, View, bootstrap } from 'angular2/angular2' @Component({ selector: 'data-bind' }) @View({ template:` <input id="name" type="text" [ng-model]="name" (ng-model)="name = $event" /> {{ name }} ` }) class DataBinding { name: string; constructor(){ this.name = 'Jose'; } } bootstrap(DataBinding);

101 data-binding  typescript  angular  2-way-object-databinding 

angular2双方向バインディングの制御をテストしようとしていinputます。ここにエラーがあります： Can't bind to 'ngModel' since it isn't a known property of 'input'. app.component.html <input id="name" type="text" [(ngModel)]="name" /> <div id="divName">{{name}}</div> app.component.ts @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { name: string; } app.component.spec.ts import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from …

101 testing  angular  angular-cli  angular2-testing 

私は、それらの役割に基づいてアプリの一部へのナビゲーションをブロックするためにガードを使用する必要がある多くの役割を持つアプリに取り組んでいます。役割ごとに個別のガードクラスを作成できることはわかっていますが、パラメーターを渡すことができるクラスを1つ持つほうがよいと思います。つまり、次のようなことができるようになりたいと思います。 { path: 'super-user-stuff', component: SuperUserStuffComponent, canActivate: [RoleGuard.forRole('superUser')] } ただし、渡すのはガードのタイプ名だけなので、その方法を考えることはできません。弾丸を噛んで役割ごとに個別のガードクラスを記述し、代わりに単一のパラメーター化された型を持つことによる優雅さの錯覚を打ち砕く必要がありますか？

101 angular  typescript  angular2-routing 

ここではフルパスマッチを使用しており、このパスマッチを削除すると、アプリのロードやプロジェクトの実行もできません import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { WelcomeComponent } from './home/welcome.component'; /* Feature Modules */ import { ProductModule } from './products/product.module'; @NgModule({ imports: [ …

101 angular  typescript 

私はマネージャーがチームを追跡するためのAngularアプリに取り組んでいますが、@ Outputエラーで立ち往生しています： An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'. Meetingsコンポーネントがあり、MeetingItemコンポーネントのリストを生成しています。ユーザーがさまざまなボタンをクリックしたときにアクションを実行したい（編集、削除、詳細の表示）。 これが私の親の会議テンプレートです： <div class="meeting__list" [@newMeeting]="meetings.length"> <app-meeting-item *ngFor="let meeting of meetings" [meeting]="meeting" (deleteMeeting)="deleteMeeting($event)" (openMeetingDialog)="openMeetingDialog($event)" (messageClick)="openMessage($event)" ></app-meeting-item> </div> 私のMeetingItemテンプレート（この投稿に関係する部分のみ）： <span class="meeting__actions"> <mat-icon *ngIf="meeting.message" (click)="onMessageClick(meeting)" matTooltip="Read the message" matTooltipPosition="above" class="icon--notes">notes</mat-icon> <mat-icon (click)="onOpenMeetingDialog(meeting)" matTooltip="Edit this meeting" matTooltipPosition="above" class="icon--edit">edit</mat-icon> <mat-icon (click)="onDeleteMeeting(meeting.id)" matTooltip="Delete this meeting" …

101 angular  click  angular-event-emitter 

いいえ、これは重複した質問ではありません。ご覧のとおり、SOとGithubには、[(ngModel)]ディレクティブがあり、フォームに含まれていないタグにこのディレクティブを追加することを規定する多くの質問と問題があります。追加しないとエラーが発生します。 ERROR Error: No value accessor for form control with unspecified name attribute OK、この属性をそこに置くとエラーはなくなります。ちょっと待って！それが何をするか誰も知らない！そして、Angularのドキュメントはそれについてまったく触れていません。値アクセサーが必要ないことがわかっているのに、なぜそれが必要なのですか？この属性は値アクセサーにどのように関連付けられていますか？この指令は何をしますか？バリューアセッサーとは何ですか。どのように使用しますか？ そして、なぜ誰もがすべてを理解していないことをし続けるのですか？このコード行を追加するだけで機能します。ありがとうございます。これは優れたプログラムを作成する方法ではありません。 その後。私はAngularのフォームに関する1つではなく2つの巨大なガイドと次のセクションを読みましたngModel： https://angular.io/guide/forms https://angular.io/guide/reactive-forms https://angular.io/guide/template-syntax#ngModel そして、あなたは何を知っていますか？値アクセサまたはのいずれかについての単一の言及ではありませんngDefaultControl。それはどこにある？

100 javascript  angular 

私はこれを行う方法を見つけるのに苦労しています。親コンポーネントでは、テンプレートはtableとそのthead要素を記述しtbodyますが、次のようにを別のコンポーネントにレンダリングします。 <table> <thead> <tr> <th>Name</th> <th>Time</th> </tr> </thead> <tbody *ngFor="let entry of getEntries()"> <my-result [entry]="entry"></my-result> </tbody> </table> 各myResultコンポーネントはtr、基本的に次のように独自のタグをレンダリングします。 <tr> <td>{{ entry.name }}</td> <td>{{ entry.time }}</td> </tr> これを親コンポーネントに直接配置しない（myResultコンポーネントの必要性を回避する）理由は、myResultコンポーネントが実際にここに示すよりも複雑であるため、その動作を別のコンポーネントとファイルに配置したいためです。 結果のDOMは悪いように見えます。これはtbody、tr要素しか含めることができないため（MDNを参照）、無効であるためと考えられますが、生成された（簡略化された）DOMは次のとおりです。 <table> <thead> <tr> <th>Name</th> <th>Time</th> </tr> </thead> <tbody> <my-result> <tr> <td>Bob</td> <td>128</td> </tr> </my-result> </tbody> <tbody> <my-result> <tr> <td>Lisa</td> <td>333</td> </tr> </my-result> …

100 javascript  angular 

*ngIfステートメントで複数のケースをどのように持つのですか？私は持ってVueのか、角度1に慣れてif、else ifとelse、それだけで持っている角度4のように思えるtrue（if）とfalse（else）の条件を。 ドキュメントによると、私はできるだけです： <ng-container *ngIf="foo === 1; then first else second"></ng-container> <ng-template #first>First</ng-template> <ng-template #second>Second</ng-template> <ng-template #third>Third</ng-template> しかし、私は複数の条件（何かのようなもの）を持ちたいです： <ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container> <ng-template #first>First</ng-template> <ng-template #second>Second</ng-template> <ng-template #third>Third</ng-template> しかしngSwitch、結局ハックのように感じるを使用する必要があります。 <ng-container [ngSwitch]="true"> <div *ngSwitchCase="foo === 1">First</div> <div *ngSwitchCase="bar === 2">Second</div> <div *ngSwitchDefault>Third</div> …

100 angular  templates  angular-ng-if 

違いは何であるcanLoadとはcanActivate？ export interface Route { path?: string; pathMatch?: string; matcher?: UrlMatcher; component?: Type<any>; redirectTo?: string; outlet?: string; canActivate?: any[]; canActivateChild?: any[]; canDeactivate?: any[]; canLoad?: any[]; data?: Data; resolve?: ResolveData; children?: Routes; loadChildren?: LoadChildren; } いつ私はそれらのどれをすべきですか？

100 angular