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

ฉันจะใช้*ngForเพื่อทำองค์ประกอบ HTML ซ้ำหลาย ๆ ครั้งได้อย่างไร ตัวอย่างเช่น: ถ้าฉันมีตัวแปรสมาชิกที่กำหนดให้เป็น 20 ฉันจะใช้คำสั่ง * ngFor เพื่อสร้าง div ซ้ำ 20 ครั้งได้อย่างไร

108 angular 

ขณะนี้เรากำลังดำเนินการโครงการใหม่ที่มีการอัปเดตเป็นประจำซึ่งลูกค้ารายหนึ่งของเราจะใช้งานทุกวัน โครงการนี้กำลังพัฒนาโดยใช้ angular 2 และเรากำลังประสบปัญหาแคชนั่นคือลูกค้าของเราไม่เห็นการเปลี่ยนแปลงล่าสุดในเครื่องของพวกเขา โดยส่วนใหญ่ไฟล์ html / css สำหรับไฟล์ js ดูเหมือนจะได้รับการอัปเดตอย่างถูกต้องโดยไม่ก่อให้เกิดปัญหามากนัก

108 caching  angular  browser-cache  cache-control  angular2-template 

ฉันต้องการใช้สีแบรนด์ของ บริษัท ของฉันตลอดทั้งแอป ฉันพบปัญหานี้: AngularJS 2 - การออกแบบวัสดุ - ตั้งค่าจานสีที่ฉันสามารถสร้างชุดรูปแบบที่กำหนดเองได้แต่โดยพื้นฐานแล้วจะใช้เพียงส่วนต่างๆของจานสีที่สร้างไว้ล่วงหน้า ฉันไม่ต้องการใช้สีที่กำหนดไว้ล่วงหน้าของ Material2 ฉันต้องการสีของแบรนด์ที่เป็นเอกลักษณ์และพิเศษของฉัน มีวิธีที่ดีกว่าในการสร้างธีมของตัวเอง_palette.scssไหม ฉันจำเป็นต้องทำมิกซ์อินสำหรับแบรนด์ของฉันหรือไม่? ถ้ามี - มีคำแนะนำเกี่ยวกับวิธีการทำอย่างถูกต้องหรือไม่? ความหมายของเฉดสีต่างๆ (มีตัวเลขเช่น 50, 100, 200, A100, A200 ... ) ข้อมูลใด ๆ เกี่ยวกับพื้นที่นี้จะได้รับการชื่นชมมาก!

108 angular  sass  material-design  angular-material2 

โอเคอาจจะยังไม่ชัดเจน รับแบบฟอร์มนี้: <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 

ฉันกำลังพัฒนาที่เก็บ github (ที่มี angular 7 และ angular-cli) และฉันมีการทดสอบบางอย่างกับ Karma และ Jasmine ที่ทำงานในสาขาหลัก ตอนนี้ฉันกำลังพยายามเพิ่มคุณสมบัติการโหลดขี้เกียจสิ่งคือการทดสอบก่อนที่จะผ่านตอนนี้พวกเขาไม่ทำ มันตลกเพราะมีเพียงการทดสอบจากโมดูลการโหลดที่ขี้เกียจเท่านั้นที่ล้มเหลว ... นี่คือรหัสและข้อผิดพลาด: import {async, TestBed} from '@angular/core/testing'; import {APP_BASE_HREF} from '@angular/common'; import {AppModule} from '../../app.module'; import {HeroDetailComponent} from './hero-detail.component'; describe('HeroDetailComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [AppModule ], providers: [ {provide: APP_BASE_HREF, useValue: '/'} …

107 javascript  angular  karma-runner  karma-jasmine  angular-cli 

วันนี้ในขณะที่ทำงานผ่าน AngularJS Intro พื้นฐานบางอย่างฉันพบปัญหา ฉันเปิด PowerShell เพื่อเริ่มโครงการ NPM ทำงาน ฉันสามารถติดตั้ง Angular โดยใช้: npm install -g @angular/cli ทุกครั้งที่ฉันพยายามรัน ng ฉันจะได้รับ: the term 'ng' is not recognized as the name of a cmdlet

107 node.js  angular  powershell  npm  angular-cli 

ดูเหมือนจะแก้ไขข้อผิดพลาดนี้ไม่ได้ ฉันมีแถบค้นหาและ ngFor ฉันกำลังพยายามกรองอาร์เรย์โดยใช้ไปป์ที่กำหนดเองดังนี้: import { Pipe, PipeTransform } from '@angular/core'; import { User } from '../user/user'; @Pipe({ name: 'usersPipe', pure: false }) export class UsersPipe implements PipeTransform { transform(users: User [], searchTerm: string) { return users.filter(user => user.name.indexOf(searchTerm) !== -1); } } การใช้งาน: <input [(ngModel)]="searchTerm" type="text" placeholder="Search users"> <div …

106 angular  angular2-forms  angular2-pipe 

เมื่อฉันใช้ไปป์ที่กำหนดเองในเทมเพลตมันจะเป็นดังนี้: {{user|userName}} และทำงานได้ดี เป็นไปได้ไหมที่จะใช้ท่อในรหัส? ฉันพยายามใช้มันดังนี้: let name = `${user|userName}`; แต่มันแสดงให้เห็น ไม่ได้กำหนด userName วิธีอื่นของฉันคือการใช้db.collection.findOne()โค้ดด้วยตนเอง แต่มีวิธีใดที่ชาญฉลาด?

106 angular  angular-pipe 

ฉันพยายามที่จะทดสอบ 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 { …

106 testing  angular  angular-cli  angular2-testing 

ในแอปพลิเคชันเชิงมุมเรามีngOnDestroy()ตะขอเกี่ยวกับวงจรชีวิตสำหรับส่วนประกอบ / คำสั่งและเราใช้ตะขอนี้เพื่อยกเลิกการเป็นสมาชิกสิ่งที่สังเกตได้ ฉันต้องการล้าง / ทำลายที่สังเกตได้ซึ่งสร้างขึ้นใน@injectable()บริการ ฉันเห็นบางกระทู้บอกว่าngOnDestroy()สามารถใช้ในบริการได้เช่นกัน แต่มันเป็นแนวทางปฏิบัติที่ดีและเป็นวิธีเดียวที่จะทำได้และเมื่อไหร่จะเรียก? ใครบางคนโปรดชี้แจง

106 angular  rxjs  observable  angular-services 

ฉันกำลังสร้างแอปพลิเคชั่นเชิงมุม 4 ฉันได้รับข้อผิดพลาด Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your module. ฉันได้สร้าง HomeModule และ HomeComponent ฉันต้องอ้างถึง AppModule ตัวไหน ฉันสับสนนิดหน่อย ฉันจำเป็นต้องอ้างอิง HomeModule หรือ HomeComponent หรือไม่ ในที่สุดสิ่งที่ฉันกำลังมองหาคือเมื่อผู้ใช้คลิกเมนูหน้าแรกเขาควรถูกนำไปที่ home.component.html ซึ่งจะแสดงผลในหน้าดัชนี App.module คือ: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from …

106 angular 

ฉันรู้ว่า Angular2 beta เพิ่งเปิดตัว แต่ฉันไม่สามารถทำซ้ำขั้นตอนจากบทช่วยสอนของเว็บไซต์อย่างเป็นทางการได้ ( https://angular.io/guide/quickstart ) อาจมีบางคนมีปัญหาที่คล้ายกันและรู้ว่าต้องทำอย่างไรเพื่อแก้ไขปัญหานี้? เมื่อฉันพยายามเริ่มแอปพลิเคชันด้วยnpm startคำสั่งฉันจะได้ผลลัพธ์ดังนี้: 0 info it worked if it ends with ok 1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ] 2 info using npm@2.7.4 3 info using node@v0.12.2 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info prestart angular2-quickstart@1.0.0 6 info …

105 node.js  angular  npm 

จะใช้ ngStyle เพื่อเพิ่มภาพพื้นหลังได้อย่างไร? รหัสของฉันใช้ไม่ได้: this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg'; <div [ngStyle]="{'background-image': url(' + photo + ')}"></div>

105 javascript  html  css  angular 

พยายามเขียนไปป์ Angular 2 ที่จะใช้สตริงอ็อบเจ็กต์ JSON และส่งคืนรูปแบบ / รูปแบบที่สวยงามเพื่อแสดงต่อผู้ใช้ ตัวอย่างเช่นจะใช้สิ่งนี้: {"id": 1, "number": "K3483483344", "state": "CA", "active": true} และส่งคืนสิ่งที่มีลักษณะเช่นนี้เมื่อแสดงใน HTML: ดังนั้นในมุมมองของฉันฉันสามารถมีบางอย่างเช่น: <td> {{ record.jsonData | prettyprint }} </td>

105 javascript  json  filter  angular  pipe 

เมื่อเขียนคอมโพเนนต์ Angular 2.0 หนึ่งจะกำหนดค่าเริ่มต้นสำหรับคุณสมบัติอย่างไร ยกตัวอย่างเช่น - ฉันต้องการชุดfooไป'bar'โดยปริยาย 'baz'แต่อาจมีผลผูกพันทันทีเพื่อแก้ไข สิ่งนี้มีบทบาทอย่างไรในตะขอเกี่ยวกับวงจรชีวิต? @Component({ selector: 'foo-component' }) export class FooComponent { @Input() foo: string = 'bar'; @Input() zalgo: string; ngOnChanges(changes){ console.log(this.foo); console.log(changes.foo ? changes.foo.previousValue : undefined); console.log(changes.foo ? changes.foo.currentValue : undefined); } } ด้วยเทมเพลตต่อไปนี้นี่คือสิ่งที่ฉันคาดหวังว่าค่าจะเป็น ฉันผิดเหรอ? <foo-component [foo] = 'baz'></foo-component> เข้าสู่คอนโซล: 'baz' 'bar' 'baz' <foo-component …

105 angular  typescript