การเขียนโปรแกรม angular

20

ฉันกำลังพยายามหาสาเหตุว่าทำไมแอป angular 2 ของฉันจึงค้างแสดงการโหลด ... เมื่อทำงานใน IE 11 ตามคำแนะนำของใครบางคนฉันได้ลองใช้ plunker นี้ซึ่งโพสต์โดยใครบางคนใน stack overflow ทั้งบน Chrome และ IE 11 ทำงานได้ดีบน Chrome แต่ล้มเหลวบน IE 11 ข้อผิดพลาดเดียวกันติดอยู่ที่พูดว่า "กำลังโหลด ... " Plunker คือ: https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview <!DOCTYPE html> <html> <head> <script>document.write('<base href="' + document.location + '" />');</script> <title>Router Sample</title> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script> …

124 angular typescript internet-explorer

6

Subject vs BehaviorSubject vs ReplaySubject ใน Angular

ฉันต้องการทำความเข้าใจ 3 สิ่งเหล่านี้: เรื่อง , เรื่องพฤติกรรมและReplay เรื่อง ฉันต้องการใช้มันและรู้ว่าเมื่อใดและทำไมประโยชน์ของการใช้คืออะไรและแม้ว่าฉันจะอ่านเอกสารดูบทแนะนำและค้นหาใน Google แล้ว แต่ฉันก็ไม่เข้าใจเรื่องนี้ แล้วจุดประสงค์ของพวกเขาคืออะไร? กรณีในโลกแห่งความเป็นจริงจะได้รับการชื่นชมมากที่สุดโดยไม่ต้องใช้รหัส ฉันต้องการคำอธิบายที่ชัดเจนไม่ใช่แค่ "a + b => c ที่คุณสมัครรับข้อมูล .... " ขอบคุณ

124 javascript angular rxjs reactive-programming angular2-observables

17

จะตรวจสอบรุ่น Angular ได้อย่างไร?

ฉันติดตั้ง@angular/cliแพ็คเกจผ่าน npm โดยใช้คำสั่งนี้: npm install -g @angular/cli ติดตั้ง @ angular / cli เวอร์ชัน 1.4.2 สำเร็จแล้ว แต่นั่นไม่ใช่เวอร์ชัน Angular แต่เป็นเวอร์ชัน CLI หลังจากรันng new myappแล้วฉันจะตรวจสอบเวอร์ชัน Angular ที่แอปที่สร้างขึ้นได้อย่างไร 2.x, 4.x?

124 angular angular-cli

4

อะไรคือพารามิเตอร์สำหรับจำนวน Pipe - Angular 2

ฉันใช้ท่อตัวเลขด้านล่างเพื่อ จำกัด ตัวเลขเป็นทศนิยมสองตำแหน่ง {{ exampleNumber | number : '1.2-2' }} ฉันสงสัยว่าตรรกะเบื้องหลัง '1.2-2' คืออะไร? ฉันได้เล่นกับสิ่งเหล่านี้เพื่อพยายามบรรลุไปป์ที่กรองตำแหน่งทศนิยมเป็นศูนย์ แต่ไม่มีประโยชน์

123 angular pipe decimal

14

วิธีปิดการใช้งานอินพุตในเชิงมุม 2

ในis_edit = trueการปิดการใช้งาน ... <input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2"> ผมเพียงแค่ต้องการที่จะปิดการใช้งานการป้อนข้อมูลที่อยู่บนพื้นฐานหรือtruefalse ฉันพยายามทำตาม: [disabled]="is_edit=='false' ? true : null" [disabled]="is_edit=='true'" [disabled]="is_edit"

123 angular angular-reactive-forms disabled-input

1

นำเข้าคลาสที่ส่งออกสองคลาสที่มีชื่อเดียวกัน

ใน typescript โดยใช้ Angular 2 ฉันต้องนำเข้าคลาสสองคลาสที่มีชื่อเดียวกัน แต่อยู่คนละเส้นทาง โปรเจ็กต์นี้ค่อนข้างใหญ่เกินไปซึ่งฉันพบว่ายากที่จะเปลี่ยนชื่อคลาสที่ส่งออก มีวิธีใดบ้างที่จะใช้แทนคลาสที่นำเข้า import {Class1} from '../location1/class1' import {Class1} from '../location2/class1'

123 angular typescript ionic2

4

ส่ง enums ในเทมเพลตมุมมอง angular2

เราสามารถใช้ enums ในเทมเพลตมุมมอง angular2 ได้หรือไม่? <div class="Dropdown" dropdownType="instrument"></div> ส่งผ่านสตริงเป็นอินพุต: enum DropdownType { instrument, account, currency } @Component({ selector: '[.Dropdown]', }) export class Dropdown { @Input() public set dropdownType(value: any) { console.log(value); }; } แต่จะผ่านการกำหนดค่า enum ได้อย่างไร? ฉันต้องการสิ่งนี้ในเทมเพลต: <div class="Dropdown" dropdownType="DropdownType.instrument"></div> แนวทางปฏิบัติที่ดีที่สุดคืออะไร? แก้ไข: สร้างตัวอย่าง: import {bootstrap} from 'angular2/platform/browser'; import {Component, View, …

123 enums angular angular2-template

7

เปลี่ยนเส้นทางเชิงมุมไปยังหน้าเข้าสู่ระบบ

ฉันมาจากโลก Asp.Net MVC ซึ่งผู้ใช้ที่พยายามเข้าถึงเพจที่พวกเขาไม่ได้รับอนุญาตจะถูกเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบโดยอัตโนมัติ ฉันพยายามสร้างพฤติกรรมนี้ซ้ำใน Angular ฉันเจอมัณฑนากร @CanActivate แต่ผลลัพธ์ก็คือส่วนประกอบไม่แสดงผลเลยไม่มีการเปลี่ยนเส้นทาง คำถามของฉันมีดังต่อไปนี้: Angular มีวิธีในการบรรลุพฤติกรรมนี้หรือไม่? ถ้าเป็นเช่นนั้นอย่างไร? เป็นแนวทางปฏิบัติที่ดีหรือไม่? ถ้าไม่แนวทางปฏิบัติที่ดีที่สุดในการจัดการการอนุญาตผู้ใช้ใน Angular คืออะไร

122 login typescript angular angular2-routing

6

ชื่อคลาสแบบไดนามิกภายใน ngClass ในเชิงมุม 2

ฉันต้องการแก้ไขค่าภายในngClassนิพจน์ แต่ไม่สามารถใช้งานได้ ฉันลองวิธีแก้ปัญหาเหล่านี้ซึ่งเป็นวิธีเดียวที่สมเหตุสมผลสำหรับฉันสองข้อนี้ล้มเหลวด้วยการแก้ไข: <button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button> <button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button> สิ่งนี้ใช้ได้กับการแก้ไข แต่ล้มเหลวกับคลาสที่เพิ่มแบบไดนามิกเนื่องจากสตริงทั้งหมดถูกเพิ่มเป็นคลาส: <button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button> คำถามของฉันคือคุณใช้ชื่อคลาสแบบไดนามิกในngClassลักษณะนี้ได้อย่างไร

122 angular

9

วิธีแสดงการเป็นตัวแทน JSON ไม่ใช่ [Object Object] บนหน้าจอ

ฉันกำลังสร้างแอปพลิเคชัน AngularJS 2 ด้วยเวอร์ชันเบต้า ฉันต้องการแสดงการแสดง JSON ของออบเจ็กต์ในเพจของฉัน แต่มันแสดง[Object Object]และไม่ แสดง{key1:value1 ....} จากส่วนประกอบที่ฉันสามารถใช้ได้: get example() {return JSON.stringify(this.myObject)}; จากนั้นในเทมเพลต: {{example}} แต่ถ้าฉันมีอาร์เรย์ของอ็อบเจ็กต์และต้องการพิมพ์รายการอ็อบเจ็กต์เหล่านี้ฉันจะทำอย่างไร? โดยใช้: <ul> <li *ngFor="#obj of myArray">{{obj}}</li> </ul> ผลลัพธ์ในบางสิ่งเช่น: - [วัตถุวัตถุ] - [วัตถุวัตถุ] - [วัตถุวัตถุ] - [วัตถุวัตถุ] และอื่น ๆ มีวิธีแสดงเป็น JSON หรือไม่?

122 json angular

11

ลบรายการออกจากอาร์เรย์ที่เก็บไว้ในเชิงมุม 2

ฉันต้องการลบรายการออกจากอาร์เรย์ที่เก็บไว้ในเชิงมุม 2 ด้วย Type Script ฉันใช้บริการที่เรียกว่าData Serviceรหัส DataService: export class DataService { private data: string[] = []; addData(msg: string) { this.data.push(msg); } getData() { return this.data; } deleteMsg(msg: string) { delete [this.data.indexOf(msg)]; } } และคลาสส่วนประกอบของฉัน: import {Component} from '@angular/core' import {LogService} from './log.service' import {DataService} from './data.service' @Component({ selector: 'tests', …

122 javascript angular typescript

7

angular 2 ngIf และ CSS การเปลี่ยน / ภาพเคลื่อนไหว

ฉันต้องการให้ div เลื่อนเข้ามาจากด้านขวาในเชิงมุม 2 โดยใช้ css <div class="note" [ngClass]="{'transition':show}" *ngIf="show"> <p> Notes</p> </div> <button class="btn btn-default" (click)="toggle(show)">Toggle</button> ฉันจะทำงานได้ดีถ้าฉันใช้ [ngClass] เพื่อสลับคลาสและใช้ความทึบ แต่ฉันไม่ต้องการให้องค์ประกอบนั้นแสดงผลตั้งแต่ต้นดังนั้นฉันจึง "ซ่อน" ด้วย ngIf ก่อน แต่การเปลี่ยนแปลงจะไม่ได้ผล .transition{ -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ; -o-transition: opacity 1000ms ease-in-out,margin-left …

121 css angular angular-animations

19

ฉันได้รับ“ การตอบสนองความล้มเหลวของ Http สำหรับ (url ที่ไม่รู้จัก): 0 ข้อผิดพลาดที่ไม่รู้จัก” แทนข้อความแสดงข้อผิดพลาดจริงใน Angular

ฉันใช้ Angular 4 HttpClientเพื่อส่งคำขอไปยังบริการภายนอก เป็นการตั้งค่ามาตรฐานมาก: this.httpClient.get(url).subscribe(response => { //do something with response }, err => { console.log(err.message); }, () => { console.log('completed'); } ปัญหาคือเมื่อคำขอล้มเหลวฉันเห็นHttp failure response for (unknown url): 0 Unknown Errorข้อความทั่วไป ในคอนโซล ในขณะเดียวกันเมื่อฉันตรวจสอบคำขอที่ล้มเหลวใน chrome ฉันเห็นสถานะการตอบกลับเป็น 422 และในแท็บ "ดูตัวอย่าง" ฉันเห็นข้อความจริงที่ระบุสาเหตุของความล้มเหลว ฉันจะเข้าถึงข้อความตอบกลับจริงที่เห็นในเครื่องมือ Chrome dev ได้อย่างไร นี่คือภาพหน้าจอที่แสดงปัญหา:

121 angular typescript

5

จะสร้าง Observable จากข้อมูลคงที่คล้ายกับ http one ใน Angular ได้อย่างไร

ฉันมีบริการที่มีวิธีการนี้: export class TestModelService { public testModel: TestModel; constructor( @Inject(Http) public http: Http) { } public fetchModel(uuid: string = undefined): Observable<string> { if(!uuid) { //return Observable of JSON.stringify(new TestModel()); } else { return this.http.get("http://localhost:8080/myapp/api/model/" + uuid) .map(res => res.text()); } } } ในตัวสร้างของคอมโพเนนต์ฉันสมัครสมาชิกดังนี้: export class MyComponent { testModel: TestModel; testModelService: …

121 typescript promise angular observable rxjs

7

ไม่มีคุณสมบัติ 'value' ในประเภท EventTarget ใน TypeScript

ดังนั้นรหัสต่อไปนี้จึงอยู่ใน Angular 4 และฉันคิดไม่ออกว่าทำไมมันถึงไม่ได้ผลอย่างที่คาด นี่คือตัวอย่างของเครื่องจัดการของฉัน: onUpdatingServerName(event: Event) { console.log(event); this.newserverName = event.target.value; //this wont work } องค์ประกอบ HTML: <input type="text" class="form-control" (input)="onUpdatingServerName($event)"> รหัสทำให้ฉันมีข้อผิดพลาด: ไม่มีคุณสมบัติ 'value' ในประเภท 'EventTarget' แต่อย่างที่เห็นได้ในconsole.logค่านั้นมีอยู่ในไฟล์event.target.

121 javascript angular typescript

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