คำถามติดแท็ก 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){ …

104 javascript  angular  angular5  angular-forms  angular-validation 

ฉันกำลังพยายามสร้างส่วนประกอบที่กำหนดเองโดยใช้หลาย ๆ ตัวng-contentใน Angular 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> ฉันกำลังพยายามใช้ส่วนประกอบนี้ในที่อื่นและแสดงโค้ด 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> แต่คอมโพเนนต์กำลังแสดงผลว่างเปล่า พวกคุณรู้ไหมว่าฉันทำอะไรผิดหรืออะไรคือวิธีที่ดีที่สุดในการแสดงสองส่วนที่แตกต่างกันในองค์ประกอบเดียวกัน ขอบคุณ!

104 angular  angular6  angular-components  ng-content 

มีบทช่วยสอนที่รวดเร็วกว่าที่ angular.io ซึ่งใช้ typescript & systemjs ตอนนี้ฉันมีแอป miniapp ที่ทำงานอยู่ฉันจะสร้างสิ่งที่ใช้งานได้อย่างไร ฉันไม่พบข้อมูลใด ๆ เกี่ยวกับเรื่องนี้เลย ฉันต้องการเครื่องมือพิเศษใด ๆ การตั้งค่าเพิ่มเติมใน System.config หรือไม่? (ฉันรู้ว่าฉันสามารถใช้ webpack และสร้าง bundle.js เดียวได้ แต่ฉันต้องการใช้ systemjs ตามที่ใช้ในบทช่วยสอน) มีใครสามารถแบ่งปันขั้นตอนการสร้างของพวกเขาด้วยการตั้งค่านี้ (Angular 2, TypeScript, systemjs)

103 typescript  angular  systemjs 

ฉันและทีมงานของฉันได้รับเงินทุนเพื่อเริ่มพัฒนาแอปพลิเคชันเว็บระดับองค์กร (จะไม่ลงรายละเอียดว่ามันทำอะไร) แอปพลิเคชันจะมีหน้าเว็บแยกกันหลายหน้า แต่สองหน้านั้นเน้นมากกว่าและหนักมาก - หนักมากในการโต้ตอบกับผู้ใช้จำนวนมากรูปแบบที่แสดงข้อมูลจำนวนมากการเชื่อมต่อ websocket การแชท ฯลฯ ฉันได้รับมอบหมายให้เป็นหัวหน้าสถาปนิกในโครงการดังนั้นฉันกำลังทำการวิจัยเกี่ยวกับกรอบงานเว็บล่าสุด สำหรับแบ็คเอนด์เราได้ทำการทดสอบและตัดสินใจที่จะใช้แพลตฟอร์ม Azure SQL จนถึงตอนนี้ฉันชอบการปรับปรุงที่เกิดขึ้นและกำลังทำกับ ASP.NET ด้วย Core 2.0 โดยเฉพาะ Razor engine มากกว่า ASP.NET MVC เวอร์ชันก่อนหน้า ฉันต้องการรับความคิดเห็นจากผู้เชี่ยวชาญเกี่ยวกับมีดโกน "ใหม่" เทียบกับ Angular / React และอื่น ๆ ฉันกังวลกับประสิทธิภาพมากขึ้นเป็นพิเศษ Core 2.0 Razor รองรับเฟรมเวิร์กการเรนเดอร์ฝั่งไคลเอ็นต์ได้อย่างไร ความแตกต่างเล็กน้อยหรือไม่? แอปของเราตั้งเป้าไปที่ผู้ใช้ 1,000,000 คน (พร้อมกันประมาณ 100,000 คน) ขอบคุณล่วงหน้า!

103 asp.net  angular  reactjs  razor 

ไม่สามารถเชื่อมโยงกับ 'ngModel' เนื่องจากไม่ใช่คุณสมบัติที่ทราบขององค์ประกอบ 'อินพุต' และไม่มีคำสั่งที่ตรงกันกับคุณสมบัติที่เกี่ยวข้อง หมายเหตุ: ฉันใช้ 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);

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

เป็นไปได้ไหมที่จะส่งแบบฟอร์มที่ไม่มีปุ่มส่ง (โดยการกด Enter) ตัวอย่าง: <form [ngFormModel]="xxx" (ngSubmit)="xxxx()"> <input [(ngModel)]="lxxR" ngControl="xxxxx"/> </form

103 forms  angular  submit 

ฉันกำลังทดลองกับ angular2 2.0.0-beta.0 ฉันมีตารางและเนื้อหาบรรทัดถูกสร้างขึ้นโดย angular2 ด้วยวิธีนี้: <table> <tr *ngFor="#line of data"> .... content .... </tr> </table> ตอนนี้ใช้งานได้และฉันต้องการห่อหุ้มเนื้อหาเป็นส่วนประกอบ "table-line" <table> <table-line *ngFor="#line of data" [data]="line"> </table-line> </table> และในองค์ประกอบแม่แบบมีเนื้อหา <tr> <td> แต่ตอนนี้โต๊ะไม่ทำงานอีกแล้ว ซึ่งหมายความว่าเนื้อหาจะไม่แสดงในคอลัมน์อีกต่อไป ในเบราว์เซอร์ตัวตรวจสอบแสดงให้ฉันเห็นว่าองค์ประกอบ DOM มีลักษณะดังนี้: <table> <table-line ...> <tbody> <tr> .... ฉันจะทำงานนี้ได้อย่างไร?

103 angular 

ฉันจะเพิ่มคลาสลงในแท็กเนื้อหาได้อย่างไรโดยไม่ต้องทำให้เนื้อหาเป็นตัวเลือกแอปและใช้การเชื่อมโยงโฮสต์ ฉันลองใช้ Renderer แต่มันเปลี่ยนทั้งร่างกาย คลาสผูกมุม 2.x บนแท็กร่างกาย ฉันกำลังทำงานกับแอพ angular2 ขนาดใหญ่และการเปลี่ยนตัวเลือกรูทจะส่งผลกระทบต่อโค้ดจำนวนมากฉันจะต้องเปลี่ยนรหัสจำนวนมาก กรณีการใช้งานของฉันคือ: เมื่อฉันเปิดส่วนประกอบโมดอล (สร้างแบบไดนามิก) ฉันต้องการให้แถบเลื่อนเอกสารซ่อน

103 angular 

คำตอบของคำถามนี้เป็นความพยายามของชุมชน แก้ไขคำตอบที่มีอยู่เพื่อปรับปรุงโพสต์นี้ ขณะนี้ยังไม่ยอมรับคำตอบหรือการโต้ตอบใหม่ ใช้ng --versionฉันได้: @ เชิงมุม / cli: 1.0.0 ซึ่งไม่ใช่รุ่นล่าสุดที่มีให้ เนื่องจากฉันได้ติดตั้ง Angular CLI ทั่วโลกในระบบของฉันเพื่อที่จะอัปเกรดฉันได้ลอง: npm update angular-cli -g แต่ไม่ได้ผลเพราะยังคงเป็นเวอร์ชัน 1.0.0

102 angular  angular-cli 

ฉันกำลังพยายามสร้างแอปพลิเคชั่น angular2 สำหรับการผลิตที่ฉันติดตามบล็อกนี้ หลังจากการคอมไพล์ngcของฉันประสบความสำเร็จเมื่อการคอมไพล์ tscเกิดขึ้นมันจะสร้างข้อผิดพลาดด้านล่างที่แสดงในภาพ: หลังจากค้นหาอยู่สักพักฉันก็พบบล็อกนี้ซึ่งอธิบายปัญหาในส่วน"คุณสมบัติบริบท"ซึ่งฉันไม่สามารถเข้าใจได้อย่างถูกต้องอาจเป็นเพราะมีความคิดที่ดีกับคุณว่าเกิดอะไรขึ้น โดยพื้นฐานแล้วเมื่อเราสร้างตัวแปรให้เป็นส่วนตัวเราจะได้รับ"ข้อผิดพลาด: คุณสมบัติเป็นส่วนตัวและสามารถเข้าถึงได้ภายในคลาสเท่านั้น" ฉันไม่เข้าใจว่าทำไมมันถึงมา กรุณาช่วยเราในขณะที่เรากำลังเผชิญหน้ากับปัญหานี้ในช่วงสองสามวันที่ผ่านมา

102 angular  typescript  typescript-typings  angular2-aot 

ฉันกำลังทำงานกับแอพเชิงมุมสำหรับผู้จัดการเพื่อติดตามทีมของพวกเขาและฉันติดอยู่กับข้อผิดพลาด @Output: An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'. ฉันมีคอมโพเนนต์การประชุมสร้างรายการคอมโพเนนต์ 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" …

102 angular  click  angular-event-emitter 

อะไรคือความแตกต่างระหว่างEventEmitter.emit()และEventEmitter.next()? ทั้งการส่งงานไปยังผู้ฟังที่สมัครรับข้อมูล export class MyService { @Output() someEvent$: EventEmitter<any> = new EventEmitter(); someFunc() { this.someEvent$.emit({myObj: true}); this.someEvent$.next({myObj: true}); } } เอกสารประกอบสำหรับ EventEmitterไม่เป็นประโยชน์ในขณะนี้

102 angular  angular2-services 

ฉันไม่สามารถแปลรหัสนี้จาก Angualr 1 เป็น Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" นี่คือสิ่งที่ฉันได้ทำตามคำตอบของ Thierry Templier: แม่แบบส่วนประกอบ: *ngFor="#todo of todos | sort" รหัสส่วนประกอบ: @Component({ selector: 'my-app', templateUrl: "./app/todo-list.component.html", providers: [TodoService], pipes: [ TodosSortPipe ] }) รหัสท่อ: import { Pipe } from "angular2/core"; import {Todo} from './todo'; @Pipe({ name: "sort" }) export …

101 angular  angular2-template  angular-pipe 

ฉันมีชุดของส่วนประกอบ angular2 ที่ทุกคนควรได้รับการฉีดบริการ ความคิดแรกของฉันคือการสร้างซูเปอร์คลาสและฉีดบริการที่นั่นจะดีที่สุด จากนั้นส่วนประกอบใด ๆ ของฉันจะขยายซุปเปอร์คลาสนั้น แต่วิธีนี้ไม่ได้ผล ตัวอย่างง่าย: export class AbstractComponent { constructor(private myservice: MyService) { // Inject the service I need for all components } } export MyComponent extends AbstractComponent { constructor(private anotherService: AnotherService) { super(); // This gives an error as super constructor needs an argument } …

101 inheritance  angular  typescript  inject  typescript1.8 

ฉันกำลังทำงานกับแอปพลิเคชันส่วนหน้ากับ Angular 5 และฉันจำเป็นต้องซ่อนช่องค้นหาไว้ แต่เมื่อคลิกปุ่มช่องค้นหาควรจะแสดงและโฟกัส ฉันได้ลองสองสามวิธีที่พบใน StackOverflow ด้วยคำสั่งหรือมากกว่านั้น แต่ไม่สามารถทำได้สำเร็จ นี่คือโค้ดตัวอย่าง: @Component({ selector: 'my-app', template: ` <div> <h2>Hello</h2> </div> <button (click) ="showSearch()">Show Search</button> <p></p> <form> <div > <input *ngIf="show" #search type="text" /> </div> </form> `, }) export class App implements AfterViewInit { @ViewChild('search') searchElement: ElementRef; show: false; name:string; constructor() { } …

101 angular  angular5  angular-forms