คำถามติดแท็ก angular

ที่นี่ใช้ pathmatch แบบเต็มและเมื่อฉันลบ pathmatch นี้มันไม่ได้โหลดแอพหรือเรียกใช้โครงการ 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 …

110 angular  typescript  angular-router 

ฉันคิดว่าฉันมีแนวคิดพื้นฐาน แต่มีบางอย่างที่ไม่ชัดเจน โดยทั่วไปนี่คือวิธีที่ฉันใช้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 => { }) ดังนั้นคำถามของฉันคือ: อะไรคือความแตกต่าง? หากไม่มีความแตกต่างทำไมฟังก์ชันจึงpipeมีอยู่? เหตุใดฟังก์ชันเหล่านี้จึงต้องการการนำเข้าที่แตกต่างกัน

110 angular  rxjs  rxjs5 

ฉันใช้ RC4 และฉันได้รับข้อผิดพลาดไม่มีคำสั่งที่ตั้งค่า "exportAs" เป็น "ngForm"เนื่องจากแม่แบบของฉัน: <div class="form-group"> <label for="actionType">Action Type</label> <select ngControl="actionType" ===> #actionType="ngForm" id="actionType" class="form-control" required> <option value=""></option> <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}"> {{ actionType.label }} </option> </select> </div> boot.ts: import {disableDeprecatedForms, provideForms} from '@angular/forms'; import {bootstrap} from '@angular/platform-browser-dynamic'; import {HTTP_PROVIDERS, Http} from '@angular/http'; import …

109 angular  typescript  angular2-forms 

ng-2 การสืบทอดข้อมูลแม่ลูกเป็นปัญหาสำหรับฉัน สิ่งที่ดูเหมือนว่าอาจเป็นวิธีแก้ปัญหาที่ใช้งานได้จริงคือการกรองอาร์เรย์ข้อมูลทั้งหมดของฉันไปยังอาร์เรย์ที่ประกอบด้วยข้อมูลลูกเท่านั้นที่อ้างอิงโดย ID หลักเดียว กล่าวอีกนัยหนึ่ง: การสืบทอดข้อมูลกลายเป็นการกรองข้อมูลโดย ID หลักหนึ่งตัว ในตัวอย่างที่เป็นรูปธรรมนี้จะมีลักษณะเหมือน: 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> …

109 arrays  filter  typescript  angular 

ในองค์ประกอบ Angular 2 ของฉันฉันมีอาร์เรย์ที่สังเกตได้ 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 array อัปเดต: ดูเหมือนว่า(list $ | async) ?. lengthทำให้เรามีความยาว แต่โค้ดด้านล่างยังใช้ไม่ได้: <div> Length: {{(list$ | async)?.length}} <div *ngIf="(list$ | async)?.length>0"> <ul> <li *ngFor="let …

109 angular  observable  angular2-template  angular2-services 

ฉันต้องการตั้งค่าภาพพื้นหลังของ DIV ในเทมเพลตคอมโพเนนต์ในแอพ Angular 2 ของฉัน อย่างไรก็ตามฉันได้รับคำเตือนต่อไปนี้ในคอนโซลของฉันและฉันไม่ได้รับเอฟเฟกต์ที่ต้องการ ... ฉันไม่แน่ใจว่ารูปภาพพื้นหลัง CSS แบบไดนามิกถูกบล็อกเนื่องจากข้อ จำกัด ด้านความปลอดภัยใน Angular2 หรือหากเทมเพลต HTML ของฉันเสีย นี่คือคำเตือนที่ฉันเห็นในคอนโซลของฉัน (ฉันเปลี่ยน img url เป็น/img/path/is/correct.png: คำเตือน: การล้าง URL ค่ารูปแบบที่ไม่ปลอดภัย (SafeValue ต้องใช้ [คุณสมบัติ] = การผูก: /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(' + …

109 typescript  angular  xss 

ฉันมี mat-select โดยที่อ็อพชันคืออ็อบเจ็กต์ทั้งหมดที่กำหนดไว้ในอาร์เรย์ ฉันพยายามตั้งค่าเป็นค่าเริ่มต้นเป็นหนึ่งในตัวเลือก แต่จะถูกเลือกทิ้งไว้เมื่อหน้าแสดงผล ไฟล์ typescript ของฉันประกอบด้วย: public options2 = [ {"id": 1, "name": "a"}, {"id": 2, "name": "b"} ] public selected2 = this.options2[1].id; ไฟล์ HTML ของฉันประกอบด้วย: <div> <mat-select [(value)]="selected2"> <mat-option *ngFor="let option of options2" value="{{ option.id }}"> {{ option.name }} </mat-option> </mat-select> </div> ฉันได้ลองการตั้งค่าselected2และvalueในmat-optionทั้งอ็อบเจ็กต์และ id แล้วและได้ลองใช้ทั้งสองอย่าง[(value)]และ[(ngModel)]ในmat-selectแต่ไม่มีการทำงาน ฉันใช้วัสดุเวอร์ชัน 2.0.0-beta.10

109 angular  typescript  angular-material2 

ฉันค่อนข้างใหม่กับ Angular ดังนั้นฉันจึงไม่แน่ใจว่าแนวทางปฏิบัติที่ดีที่สุดในการทำเช่นนี้ ฉันใช้ angular-cli และng new some-projectสร้างแอปใหม่ ในนั้นได้สร้างโฟลเดอร์ "images" ในโฟลเดอร์ "assets" ดังนั้นตอนนี้โฟลเดอร์ภาพของฉันคือ src/assets/images ในapp.component.html(ซึ่งเป็นรากของแอปพลิเคชันของฉัน) ฉันใส่ <img class="img-responsive" src="assets/images/myimage.png"> เมื่อฉันng serveจะดูเว็บแอปพลิเคชันของฉันภาพไม่ปรากฏขึ้น แนวทางปฏิบัติที่ดีที่สุดในการโหลดภาพในแอปพลิเคชัน Angular คืออะไร? แก้ไข: ดูคำตอบด้านล่าง ชื่อรูปภาพจริงของฉันใช้ช่องว่างซึ่ง Angular ไม่ชอบ เมื่อฉันลบช่องว่างในชื่อไฟล์ภาพจะแสดงอย่างถูกต้อง

109 html  angular  angular-cli 

ด้วยรายการของช่องทำเครื่องหมายที่ผูกไว้กับช่องเดียวกัน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', ...]

109 javascript  angular  checkbox  angular2-forms 

ฉันจะมีหลายกรณีใน*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> …

109 angular  templates  angular-ng-if 

ฉันเพิ่งเริ่มใช้ angular 5 และพยายามทำซ้ำแผนที่ที่มีแผนที่อื่นใน 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) …

109 javascript  angular  typescript  angular-cli 

[object ErrorEvent] thrownฉันมีการทดสอบล้มเหลวหลายอย่างที่ส่งออกเท่านั้น ฉันไม่เห็นอะไรเลยในคอนโซลที่ช่วยระบุรหัสที่กระทำผิด มีสิ่งที่ฉันต้องทำเพื่อติดตามสิ่งเหล่านี้หรือไม่? [แก้ไข]: ฉันใช้ Karma v1.70, Jasmine v2.7.0

108 angular  angular-cli  karma-jasmine 

ฉันสามารถใช้ngIfโดยไม่มีองค์ประกอบคอนเทนเนอร์เพิ่มเติมได้หรือไม่ <tr *ngFor="..."> <div *ngIf="..."> ... </div> <div *ngIf="!..."> ... </div> </tr> ไม่ทำงานในตารางเนื่องจากจะทำให้ HTML ไม่ถูกต้อง

108 html  templates  angular 

<div> <input #ipt type="text"/> </div> เป็นไปได้ไหมที่จะเข้าถึงตัวแปรการเข้าถึงเทมเพลตจากคลาสคอมโพเนนต์ กล่าวคือฉันสามารถเข้าถึงได้ที่นี่ class XComponent{ somefunction(){ //Can I access #ipt here? } }

108 angular  typescript  angular2-template 

สมมติว่าฉันมีส่วนประกอบ 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; } …

108 css  angular