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

คำถามเกี่ยวกับ Angular (เพื่อไม่ให้สับสนกับ AngularJS) ซึ่งเป็นกรอบเว็บจาก Google ใช้แท็กนี้สำหรับคำถามเชิงมุมซึ่งไม่เจาะจงสำหรับแต่ละเวอร์ชัน สำหรับเฟรมเวิร์กเว็บ AngularJS (1.x) ที่เก่ากว่าให้ใช้แท็ก angularjs

5
วิธีการอัดฉีดบริการในชั้นเรียน (ไม่ใช่ส่วนประกอบ)
ฉันต้องการที่จะฉีดให้บริการในชั้นเรียนที่มีไม่ได้องค์ประกอบ ตัวอย่างเช่น: บริการ import {Injectable} from '@angular/core'; @Injectable() export class myService { dosomething() { // implementation } } ห้องเรียนของฉัน import { myService } from './myService' export class MyClass { constructor(private myservice:myService) { } test() { this.myservice.dosomething(); } } วิธีนี้ไม่ได้ผล (ฉันคิดว่าเพราะMyClassยังไม่ได้สร้างอินสแตนซ์) มีวิธีอื่นในการใช้บริการในชั้นเรียน (ไม่ใช่ส่วนประกอบ) หรือไม่? หรือคุณคิดว่าการออกแบบโค้ดของฉันไม่เหมาะสม (เพื่อใช้บริการในคลาสที่ไม่ใช่ส่วนประกอบ) ขอขอบคุณ.

19
ข้อผิดพลาด rxjs / Subject.d.ts: คลาส 'Subject <T>' ขยายคลาสพื้นฐาน 'Observable <T>' อย่างไม่ถูกต้อง
ฉันแยกโค้ดเทมเพลตตัวอย่างจากบทช่วยสอนนี้และดำเนินการด้านล่างสองขั้นตอนเพื่อเริ่มต้น - npm install // worked fine and created node_modules folder with all dependencies npm start // ล้มเหลวโดยมีข้อผิดพลาดด้านล่าง - node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class 'Subject&lt;T&gt;' incorrectly extends base class 'Observable&lt;T&gt;'. Types of property 'lift' are incompatible. Type '&lt;T, R&gt;(operator: Operator&lt;T, R&gt;) =&gt; Observable&lt;T&gt;' is not assignable to type '&lt;R&gt;(operator: Operator&lt;T, R&gt;) …

5
Angular 2 ทำไมต้องเป็นเครื่องหมายดอกจัน (*)
ในเอกสารเชิงมุม 2 * และเทมเพลตเราทราบว่า * ngIf, * ngSwitch, * ngFor สามารถขยายเป็นแท็ก ng-template ได้ คำถามของฉันคือ: ฉันคิดว่าการแปลngIfหรือngForไม่มี*ก็สามารถแปลและขยายเป็นแท็กเทมเพลตได้ด้วยเครื่องมือเชิงมุม รหัสต่อไปนี้ &lt;hero-detail *ngIf="currentHero" [hero]="currentHero"&gt;&lt;/hero-detail&gt; ก็จะเหมือนกับ &lt;ng-template [ngIf]="currentHero"&gt; &lt;hero-detail [hero]="currentHero"&gt;&lt;/hero-detail&gt; &lt;/ng-template&gt; แล้วทำไมต้องกังวลกับการออกแบบเครื่องหมายดอกจันสัญลักษณ์แปลก ๆ ( *) ในเชิงมุม 2?

5
ข้อผิดพลาดในการทดสอบหน่วยเชิงมุม 4 "TypeError: ctor ไม่ใช่ตัวสร้าง"
ฉันกำลังพยายามทดสอบตัวแก้ไขเส้นทางของฉันและขณะทดสอบฉันได้รับTypeError: ctor is not a constructorและไม่รู้ว่าทำไมมันถึงเกิดขึ้นในขณะที่เวลาคอมไพล์ typescript ไม่มีข้อผิดพลาด TypeError: ctor is not a constructor TypeError: ctor is not a constructor at _createClass (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42355:26) at _createProviderInstance$1 (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42330:26) at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42315:17) at _createClass (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42362:26) at _createProviderInstance$1 (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42330:26) at resolveNgModuleDep (http://localhost:9877/_karma_webpack_/vendor.bundle.js:42315:17) at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:9877/_karma_webpack_/vendor.bundle.js:43401:16) at TestBed.webpackJsonp../node_modules/@angular/core/@angular/core/testing.es5.js.TestBed.get (http://localhost:9877/_karma_webpack_/vendor.bundle.js:48412:47) at http://localhost:9877/_karma_webpack_/vendor.bundle.js:48418:61 at Array.map (native)

5
Angular2 * ngIf ตรวจสอบความยาวอาร์เรย์วัตถุในเทมเพลต
อ้างถึงhttps://angular.io/docs/ts/latest/guide/displaying-data.htmlและกองซ้อนวิธีตรวจสอบวัตถุว่างในเทมเพลตเชิงมุม 2 โดยใช้ * ngIfยังคงได้รับข้อผิดพลาดทางไวยากรณ์ไม่ได้กำหนดบริบทด้วยตนเอง ถ้าฉันลบเงื่อนไข * ngIf ฉันจะได้รับค่าใน teamMembers ถ้าฉันใส่ค่าบางอย่างเข้าไปเพื่อให้ฉันสามารถเข้าถึงค่าใน teamMembers ได้ teamMemberวัตถุของ[ ] arrayฉันฉันกำลังพยายามตรวจสอบอาร์เรย์เงื่อนไขว่างเปล่าตามขนาด ความพยายาม: &lt;div class="row" *ngIf="(teamMembers | json) != '{}'"&gt; และ &lt;div class="row" *ngIf="teamMembers.length &gt; 0"&gt; //Check length great than throwing syntax error &lt;div class="col-md-12"&gt; &lt;h4&gt;Team Members&lt;/h4&gt; &lt;ul class="avatar" *ngFor="let member of teamMembers"&gt; &lt;li&gt;&lt;a href=""&gt;&lt;gravatar-image [size]="80" …

13
จะรีเซ็ตไฟล์ที่เลือกด้วยประเภทไฟล์แท็กอินพุตใน Angular 2 ได้อย่างไร
นี่คือลักษณะของแท็กอินพุตของฉัน: &lt;input type="file" placeholder="File Name" name="filename" (change)="onChange($event)"&gt; &lt;button&gt;Reset&lt;/button&gt; ฉันต้องการรีเซ็ตไฟล์ที่เลือกใน Angular 2 ความช่วยเหลือจะได้รับการชื่นชมอย่างมาก โปรดแจ้งให้เราทราบหากคุณต้องการรายละเอียดเพิ่มเติม ปล ฉันสามารถรับรายละเอียดไฟล์จาก$eventพารามิเตอร์และบันทึกลงในตัวแปร typescript แต่ตัวแปรนี้ไม่ผูกมัดกับแท็กอินพุต
90 angular 

9
App.settings - วิธีเชิงมุม?
ฉันต้องการเพิ่มApp Settingsส่วนลงในแอปของฉันซึ่งจะมีค่า const และค่าที่กำหนดไว้ล่วงหน้า ฉันได้อ่านคำตอบนี้แล้วซึ่งใช้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&lt;string&gt;('apiUrl'); และนี่คือส่วนประกอบที่ฉันต้องการใช้ const เหล่านั้น: //MainPage.ts import {...} from '@angular/core' import {ServiceTest} from …

30
vs โค้ดไม่พบโมดูล '@ angular / core' หรือโมดูลอื่น ๆ
โครงการของฉันสร้างขึ้นด้วย [Angular CLI] เวอร์ชัน 1.2.6 ฉันสามารถรวบรวมโครงการและทำงานได้ดี แต่ฉันมักจะได้รับข้อผิดพลาดในรหัสเทียบกับที่บอกว่าไม่พบโมดูล '@ angular / core' ไม่พบโมดูล '@ angular / router' ไม่พบโมดูล ..... ฉันได้แนบเนื้อหาของไฟล์ tsconfig.json ของฉันซึ่งทำให้ฉันหงุดหงิดมากใช้เวลา 2 ชั่วโมงเพื่อค้นหาว่ามีอะไรผิดพลาดฉันได้ถอนการติดตั้งและติดตั้งใหม่เทียบกับโค้ดที่ใช้ไม่ได้ นี่คือข้อกำหนดสภาพแวดล้อมของฉัน: @angular/cli: 1.2.6 node: 6.9.1 os: win32 x64 @angular/animations: 4.3.4 @angular/common: 4.3.4 @angular/compiler: 4.3.4 @angular/core: 4.3.4 @angular/forms: 4.3.4 @angular/http: 4.3.4 @angular/platform-browser: 4.3.4 @angular/platform-browser-dynamic: 4.3.4 @angular/router: 4.3.4 @angular/cli: …

11
การเรียงลำดับเริ่มต้นในวัสดุเชิงมุม - จัดเรียงส่วนหัว
ฉันจะเปลี่ยนรหัสวัสดุเชิงมุมด้านล่างได้อย่างไรเพื่อให้ตารางข้อมูลจัดเรียงตามคอลัมน์ 'ชื่อ' โดยเรียงลำดับจากน้อยไปมากตามค่าเริ่มต้น ต้องแสดงลูกศร (ระบุทิศทางการจัดเรียงปัจจุบัน) นี่คือสิ่งที่ฉันต้องการบรรลุ: รหัสเดิม: &lt;table matSort (matSortChange)="sortData($event)"&gt; &lt;tr&gt; &lt;th mat-sort-header="name"&gt;Dessert (100g)&lt;/th&gt; &lt;th mat-sort-header="calories"&gt;Calories&lt;/th&gt; &lt;th mat-sort-header="fat"&gt;Fat (g)&lt;/th&gt; &lt;th mat-sort-header="carbs"&gt;Carbs (g)&lt;/th&gt; &lt;th mat-sort-header="protein"&gt;Protein (g)&lt;/th&gt; &lt;/tr&gt; &lt;tr *ngFor="let dessert of sortedData"&gt; &lt;td&gt;{{dessert.name}}&lt;/td&gt; &lt;td&gt;{{dessert.calories}}&lt;/td&gt; &lt;td&gt;{{dessert.fat}}&lt;/td&gt; &lt;td&gt;{{dessert.carbs}}&lt;/td&gt; &lt;td&gt;{{dessert.protein}}&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ฉันกำลังลองสิ่งนี้ แต่ไม่ได้ผล (ไม่มีลูกศรแสดงขึ้นไม่ได้เรียงลำดับ) &lt;table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear&gt; นี่คือลิงค์ไปยังPlunker

2
การทดสอบเชิงมุม 2 - การเรียกใช้ฟังก์ชัน Async - เมื่อจะใช้
คุณใช้ฟังก์ชัน async ในTestBedเมื่อใดเมื่อทำการทดสอบใน Angular 2 คุณใช้สิ่งนี้เมื่อใด beforeEach(() =&gt; { TestBed.configureTestingModule({ declarations: [MyModule], schemas: [NO_ERRORS_SCHEMA], }); }); และคุณใช้สิ่งนี้เมื่อใด? beforeEach(async(() =&gt; { TestBed.configureTestingModule({ declarations: [MyModule], schemas: [NO_ERRORS_SCHEMA], }); })); ใครสามารถให้ความกระจ่างฉันเกี่ยวกับเรื่องนี้?

12
Router Navigate ไม่เรียก ngOnInit เมื่ออยู่ในหน้าเดียวกัน
ฉันกำลังเรียกใช้router.navigateในหน้าเดียวกันพร้อมกับพารามิเตอร์สตริงการค้นหา ในกรณีngOnInit()นี้ไม่โทร. เป็นค่าเริ่มต้นหรือต้องเพิ่มอะไรอีก?

5
ความแตกต่างระหว่าง [(ngModel)] และ [ngModel] สำหรับการผูกสถานะกับคุณสมบัติ
นี่คือตัวอย่างเทมเพลต: &lt;input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate"&gt; &lt;input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate"&gt; ที่นี่ทั้งสองคนทำสิ่งเดียวกัน ชอบอันไหนและเพราะอะไร?

5
มีวิธีทดสอบ EventEmitter ใน Angular2 ไหม
ฉันมีส่วนประกอบที่ใช้ EventEmitter และ EventEmitter ถูกใช้เมื่อมีคนคลิกในเพจ มีวิธีใดบ้างที่ฉันสามารถสังเกต EventEmitter ระหว่างการทดสอบหน่วยและใช้ TestComponentBuilder เพื่อคลิกองค์ประกอบที่ทริกเกอร์เมธอด EventEmitter.next () และดูสิ่งที่ส่ง

15
จะล้างแบบฟอร์มหลังจากส่งใน Angular 2 ได้อย่างไร?
ฉันมีองค์ประกอบ 2 เชิงมุมง่ายๆพร้อมเทมเพลต จะล้างแบบฟอร์มและช่องทั้งหมดหลังจากส่งได้อย่างไร?. ฉันโหลดหน้าใหม่ไม่ได้ หลังจากตั้งค่าข้อมูลด้วยdate.setValue('')ฟิลด์touchedแล้ว import {Component} from 'angular2/core'; import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common'; @Component({ selector: 'loading-form', templateUrl: 'app/loadings/loading-form.component.html', directives: [FORM_DIRECTIVES] }) export class LoadingFormComponent { private form:ControlGroup; private date:Control; private capacity:Control; constructor(private _loadingsService:LoadingsService, fb:FormBuilder) { this.date = new Control('', Validators.required); this.capacity = new Control('', Validators.required); …

18
md-table - วิธีอัปเดตความกว้างของคอลัมน์
ฉันได้เริ่มใช้ตาราง md สำหรับโครงการของฉันแล้วและฉันต้องการความกว้างของคอลัมน์คงที่ ปัจจุบันความกว้างของคอลัมน์ทั้งหมดแบ่งออกเป็นขนาดเท่ากัน ฉันจะรับเอกสารของขนาดตารางข้อมูลได้จากที่ใด https://material.angular.io/components/table/overview
88 angular 

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.