Вопросы по тегу: angular

(346)

Строки таблицы Angular2 как компонент

Я экспериментирую с angular2 2.0.0-beta.0У меня есть таблица, и содержимое строки генерируется angular2 следующим образом: .... содержание .... Теперь это работает, и я хочу инкапсулировать содержимое в компонент "строка таблицы". А в компоненте шаблон имеет содержимое .Но теперь таблица больше не работает. Это означает, что содержимое больше не отображается в столбцах. В браузере инспектор показывает мне, что элементы DOM выглядят так: .... Как мне заставить это работать?
f

fbenoit

6 лет назад

Ответов: 5

Использование массива из Observable Object с ngFor и Async Pipe Angular 2

Я пытаюсь понять, как использовать Observables в Angular 2. У меня есть эта служба:import {Injectable, EventEmitter, ViewChild} from '@angular/core'; import {Observable} from "rxjs/Observable"; import {Subject} from "rxjs/Subject"; import {BehaviorSubject} from "rxjs/Rx"; import {Availabilities} from './availabilities-interface' @Injectable() export class AppointmentChoiceStore { public _appointmentChoices: BehaviorSubject = new BehaviorSubject({"availabilities": [''], "length": 0}) constructor() {} getAppointments() { return this.asObservable(this._appointmentChoices) } asObservable(subject: Subject) { return new Observable(fn => subject.subscribe(fn)); } } Этот BehaviorSubject получает новые значения из другой службы:that._appointmentChoiceStore._appointmentChoices.next(parseObject) Я подписываюсь на него в виде наблюдаемого в компоненте, в котором я хочу его отобразить:import {Component, OnInit, AfterViewInit} from '@angular/core' import {AppointmentChoiceStore} from '../shared/appointment-choice-service' import {Observable} from 'rxjs/Observable' import {Subject} from 'rxjs/Subject' import {BehaviorSubject} from "rxjs/Rx"; import {Availabilities} from '../shared/availabilities-interface' declare const moment: any @Component({ selector: 'my-appointment-choice', template: require('./appointmentchoice-template.html'), styles: [require('./appointmentchoice-style.css')], pipes: [CustomPipe] }) export class AppointmentChoiceComponent implements OnInit, AfterViewInit { private _nextFourAppointments: Observable constructor(private _appointmentChoiceStore: AppointmentChoiceStore) { this._appointmentChoiceStore.getAppointments().subscribe(function(value) { this._nextFourAppointments = value }) } } И попытка отобразить в представлении так: {{appointment | date: 'EEE' | uppercase}} Однако доступность еще не является свойством наблюдаемого объекта, поэтому она выдает ошибку, хотя я определяю ее в интерфейсе доступности следующим образом:export interface Availabilities { "availabilities": string[], "length": number } Как я могу асинхронно отобразить массив из наблюдаемого объекта с помощью асинхронного канала и *ngFor? Я получаю сообщение об ошибке:browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'availabilties' of undefined
C

C. Kearns

6 лет назад

Ответов: 4

Как объявить канал глобально для использования в разных модулях?

У меня есть пользовательский канал с именем CurrConvertPipe import {Pipe, PipeTransform} from '@angular/core'; import {LocalStorageService} from './local-storage'; @Pipe({name: 'currConvert', pure: false}) export class CurrConvertPipe implements PipeTransform { constructor(private currencyStorage: LocalStorageService) {} transform(value: number): number { let inputRate = this.currencyStorage.getCurrencyRate('EUR'); let outputputRate = this.currencyStorage.getCurrencyRate(localStorage.getItem('currency')); return value / inputRate * outputputRate; } } Мне нужно использовать это в двух разных модулях, Module1 и Module2. Когда я импортирую в Module1 и Module2, я получаю сообщение об ошибке, говорящее, что он должен быть объявлен в модуле более высокого уровня.Итак, я объявляю канал внутри app.module.tsimport './rxjs-extensions'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CurrConvertPipe } from './services/currency/currency-pipe'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule, Module1, Module2 ], declarations: [ AppComponent, CurrConvertPipe ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Но когда я использую его в Module1, выдает ошибку Канал 'currConvert' не найден
S

Sajeetharan

5 лет назад

Ответов: 5

Маршрутизатор Angular2 сохраняет строку запроса

Я написал приложение Angular2 (v2.0.1), которое использует маршрутизатор. Веб-сайт загружается с несколькими параметрами строки запроса, поэтому полный URL изначально выглядит так:https://my.application.com/?param1=val1¶m2=val2¶m3=val3 В моей конфигурации маршрута есть запись, которая перенаправляет пустой маршрут:const appRoutes: Routes = [ { path: '', redirectTo: '/comp1', pathMatch: 'full' }, { path: 'comp1', component: FirstComponent }, { path: 'comp2', component: SecondComponent } ]; Моя проблема в том, что после загрузки приложения URL-адрес больше не содержит параметров запроса, вместо этого он выглядит так:https://my.application.com/comp1 Можно ли настроить маршрутизатор таким образом, чтобы он сохранял исходную строку запроса при навигации?Спасибо Лукас
L

Lukas Kolletzki

5 лет назад

Ответов: 10

Как провести модульное тестирование компонента, который зависит от параметров из ActivatedRoute?

Я выполняю модульное тестирование компонента, используемого для редактирования объекта. Объект имеет уникальный идентификатор id, который используется для получения определенного объекта из массива объектов, размещенных в службе. Конкретный idполучается через параметр, который передается через маршрутизацию, в частности, через класс ActivatedRoute.Конструктор выглядит следующим образом:конструктор (частный _router: Router, частный _curRoute: ActivatedRoute, частный _session: Session) {} нгонинит () { this._curRoute.params.subscribe(params => { this.userId = params['id']; this.userObj = this._session.allUsers.filter(user => user.id.toString() === this.userId.toString())[0]; Я хочу запустить базовые модульные тесты для этого компонента. Однако я не уверен, как мне ввести параметр id, а компоненту требуется этот параметр.Кстати: у меня уже есть макет для сервиса Session, так что не беспокойтесь.
C

Colby Cox

6 лет назад

Ответов: 10

ngModel нельзя использовать для регистрации элементов управления формы с родительской директивой formGroup

После обновления до RC5 мы начали получать эту ошибку:ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example: In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions: Example: Похоже, что в RC5 их больше нельзя использовать вместе, но я не смог найти альтернативного решения.Вот компонент, создающий исключение: {{c.text}}
u

user2363245

5 лет назад

Ответов: 10

Получение экземпляра службы без внедрения конструктора

У меня есть служба @Injectable, определенная в начальной загрузке. Я хочу получить экземпляр службы без использования внедрения конструктора. Я пытался использовать ReflectiveInjector.resolveAndCreate, но это, похоже, создает новый экземпляр.Причина, по которой я пытаюсь это сделать, заключается в том, что у меня есть базовый компонент, полученный из многих компонентов. Теперь мне нужно получить доступ к сервису, но я не хочу добавлять его в ctor, потому что не хочу внедрять сервис во все производные компоненты.TLDR: мне нужен ServiceLocator.GetInstance()ОБНОВЛЕНИЕ: Обновленный код для RC5+: Сохранение экземпляра инжектора для использования в компонентах
d

dstr

6 лет назад

Ответов: 5

Обновление Angular 10 — исправление зависимостей CommonJS или AMD может привести к отказу от оптимизации

Я пытаюсь обновить приложение Angular 9 до версии Angular 10, но после обновления получаю предупреждение нижеWARNING in calendar.reducer.ts depends on lodash/keys. CommonJS or AMD dependencies can cause optimization bailouts. Я добавил строку ниже в свой файл angular.json, но проблема не решена"allowedCommonJsDependencies": ["lodash"] Как исправить указанную выше проблему.
r

rrr

2 года назад

Ответов: 1

Как перейти к родительскому маршруту из дочернего маршрута?

Моя проблема довольно классическая. У меня есть частная часть приложения, которая находится за формой входа. Когда вход в систему выполнен успешно, он переходит на дочерний маршрут для приложения администратора.Моя проблема в том, что я не могу использовать глобальное меню навигации, потому что маршрутизатор пытается выполнить маршрутизацию в моем AdminComponent вместо моего AppCompoment. Итак, моя навигация не работает.Еще одна проблема заключается в том, что если кто-то хочет напрямую получить доступ к URL-адресу, я хочу перенаправить на родительский маршрут «вход». Но я не могу заставить его работать. Мне кажется, что эти два вопроса похожи.Есть идеи, как это можно сделать?
C

Carl Boisvert

6 лет назад

Ответов: 13

Angular2 canActivate() вызывает асинхронную функцию

Я пытаюсь использовать защиту маршрутизатора Angular2, чтобы ограничить доступ к некоторым страницам в моем приложении. Я использую аутентификацию Firebase. Чтобы проверить, вошел ли пользователь в Firebase, мне нужно вызвать .subscribe() для объекта FirebaseAuth с обратным вызовом. Это код охранника:import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AngularFireAuth } from "angularfire2/angularfire2"; import { Injectable } from "@angular/core"; import { Observable } from "rxjs/Rx"; @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AngularFireAuth, private router: Router) {} canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable|boolean { this.auth.subscribe((auth) => { if (auth) { console.log('authenticated'); return true; } console.log('not authenticated'); this.router.navigateByUrl('/login'); return false; }); } } При переходе на страницу, на которой есть защита, в консоль выводится либо аутентифицировано, либо не аутентифицировано (после некоторой задержки в ожидании ответа от firebase) . Однако навигация никогда не завершается. Кроме того, если я не вошел в систему, меня перенаправляют на маршрут /login. Итак, у меня проблема: return true не отображает запрошенную страницу пользователю. Я предполагаю, что это потому, что я использую обратный вызов, но я не могу понять, как это сделать иначе. Есть мысли?
E

Evan Salter

6 лет назад

Ответов: 9

Как «ждать» двух наблюдаемых в RxJS

В моем приложении есть что-то вроде:this._personService.getName(id) .concat(this._documentService.getDocument()) .subscribe((response) => { console.log(response) this.showForm() }); //Output: // [getnameResult] // [getDocumentResult] // I want: // [getnameResult][getDocumentResult] Затем я получаю два отдельных результата: сначала _personService, а затем _documentService. Как я могу дождаться обоих результатов перед вызовом this.showForm() для завершения, а затем манипулировать результатами каждого из них.
g

gog

5 лет назад

Ответов: 8

Вызов функции по событию клика в Angular 2

Как объявить функцию внутри компонента (машинописный текст) и вызвать ее по событию клика в Angular 2? Ниже приведен код для той же функциональности в Angular 1, для которой мне требуется код Angular 2: //контроллерapp.controller('myCtrl', ['$scope', function($cope) { $scope.myFunc= { console.log("function called"); }; }]);
A

Azhar Khan

5 лет назад

Ответов: 5

Что такое параметр чтения в @ViewChild для

Нужна помощь, чтобы понять значение {read: ViewContainerRef} в следующем утверждении.@ViewChild('myname', {read: ViewContainerRef}) target;
P

Pankaj Kapare

6 лет назад

Ответов: 1

'router-outlet' не является известным элементом

У меня есть проект mvc 5 с угловым интерфейсом. Я хотел добавить маршрутизацию, как описано в этом руководстве https://angular.io/guide/router. Итак, в моем _Layout.cshtml я добавил и создал свою маршрутизацию в моем app.module. Но когда я запускаю это, я получаю следующую ошибку: Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" dashboard [ERROR ->] "): ng:///AppModule/AppComponent.html@5:0 В моем app.component строка выдает ошибку, сообщающую мне, что Visual Studio не может разрешить тег «маршрутизатор-выход». Любые предложения, как я могу исправить эту ошибку? Я пропустил ссылку или импорт или просто что-то упускаю из виду?Ниже приведены мои package.json, app.component и app.modulepackage.json:{ "version": "1.0.0", "name": "app", "private": true, "scripts": {}, "dependencies": { "@angular/common": "^4.2.2", "@angular/compiler": "^4.2.2", "@angular/core": "^4.2.2", "@angular/forms": "^4.2.2", "@angular/http": "^4.2.2", "@angular/platform-browser": "^4.2.2", "@angular/platform-browser-dynamic": "^4.2.2", "@angular/router": "^4.2.2", "@types/core-js": "^0.9.41", "angular-in-memory-web-api": "^0.3.2", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "graceful-fs": "^4.0.0", "ie-shim": "^0.1.0", "minimatch": "^3.0.4", "reflect-metadata": "^0.1.10", "rxjs": "^5.0.1", "systemjs": "^0.20.12", "zone.js": "^0.8.12" }, "devDependencies": { "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-concat": "^2.6.1", "gulp-tsc": "^1.3.2", "gulp-typescript": "^3.1.7", "path": "^0.12.7", "typescript": "^2.3.3" } } app.module.ts:импорт {NgModule} из '@angular/core'; импортировать {BrowserModule} из '@angular/platform-browser'; импортировать {FormsModule} из '@angular/forms'; импортировать { RouterModule, Routes } из '@angular/router'; импортировать {AppComponent} из './app.component'; импортировать {DashboardComponent} из "./dashboard/dashboard.component" const appRoutes: Маршруты = [ { дорожка: '', перенаправить на: '/ панель инструментов', pathMatch: «полный», компонент: DashboardComponent }, { путь: 'приборная панель', компонент: DashboardComponent } ]; @NgModule({ импорт: [ RouterModule.forRoot(appRoutes), БраузерМодуль, ФормыМодуль ], экспортирует: [RouterModule], декларации: [ AppComponent, DashboardComponent ], начальная загрузка: [AppComponent] }) экспортный класс AppModule { } app.component.ts:import {Component} из '@angular/core'; @Компонент({ селектор: 'мое-приложение', шаблон: ` {{название}} панель управления ` }) экспортный класс AppComponent { title = 'приложение загружено'; }
M

Molo

5 лет назад

Ответов: 18

Как получить параметр из URL-адреса в angular 4?

Я пытаюсь получить дату начала по URL-адресу. URL выглядит как http://sitename/booking?startdate=28-08-2017Мой код ниже:aap.module.ts импорт {...}; @NgModule({ декларации: [ AppComponent, модальный компонент ], импорт: [ БраузерМодуль, форммодуль, HttpModule, JsonpModule, РеактивФормсМодуле, RouterModule.forRoot([{ дорожка: '', компонент: AppComponent }, ]), ], провайдеры: [ContactService, AddonService, MainService], начальная загрузка: [AppComponent] }) экспортировать класс AppModule { } aap.component.tsимпорт {...} импортировать {Router, ActivatedRoute, Params} из '@angular/router'; конструктор (частный активированный маршрут: активированный маршрут) { // подписываемся на событие роутера this.activatedRoute.queryParams.subscribe((params: Params) => { console.log(параметры); }); } Но выдает следующую ошибку Отклонение необработанного обещания: базовая ссылка не задана. Укажите значение для токена APP_BASE_HREF или добавьте в документ базовый элемент. ; Зона: ; Задание: Promise.then ; Значение: Ошибка: не задана базовая ссылка. Укажите значение токена APP_BASE_HREF или добавьте базу элемент документа. Как Angular узнает базовый адрес?
S

Sudha Bisht

4 года назад

Ответов: 12

ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после проверки. Предыдущее значение: «не определено»

Я знаю, что в stack-overflow уже опубликовано много одинаковых вопросов, и пробовал разные решения, чтобы избежать ошибки во время выполнения, но ни один из них не работает для меня.Компонент и HTML-кодexport class TestComponent implements OnInit, AfterContentChecked { @Input() DataContext: any; @Input() Position: any; sampleViewModel: ISampleViewModel = { DataContext: : null, Position: null }; constructor(private validationService: IValidationService, private modalService: NgbModal, private cdRef: ChangeDetectorRef) { } ngOnInit() { } ngAfterContentChecked() { debugger; this.sampleViewModel.DataContext = this.DataContext; this.sampleViewModel.Position = this.Position; } //some other html here Обратите внимание: этот компонент загружается динамически с помощью DynamicComponentLoaderПосле устранения неполадок я обнаружил пару проблемВо-первых, этот дочерний компонент загружается динамически с помощью DynamicComponentResolver и передачи входных значений, как показано ниже ngAfterViewInit() { this.renderWidgetInsideWidgetContainer(); } renderWidgetInsideWidgetContainer() { let component = this.storeFactory.getWidgetComponent(this.dataSource.ComponentName); let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component); let viewContainerRef = this.widgetHost.viewContainerRef; viewContainerRef.clear(); let componentRef = viewContainerRef.createComponent(componentFactory); debugger; (componentRef.instance).WidgetDataContext = this.dataSource.DataContext; (componentRef.instance).WidgetPosition = this.dataSource.Position; } Даже если я изменил html своего дочернего компонента, как показано ниже, я получаю ту же ошибку. Просто добавьте угловой атрибут ngclass Моя привязка данных и все работает нормально. Нужно ли мне что-то делать с родительским компонентом? Я уже пробовал все события жизненного цикла в дочернем компоненте
J

Jameel Moideen

4 года назад

Ответов: 12

Как внедрить сервис в класс (не компонент)

Я хочу внедрить сервис в класс, который не является компонентом.Например:Мой сервис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 еще не создан экземпляр).Есть ли другой способ использования службы в классе (не в компоненте)? Или вы сочтете мой дизайн кода неуместным (для использования службы в классе, который не является компонентом)?Спасибо.
E

Elec

5 лет назад

Ответов: 5

Как добавить запрос CORS в заголовок в Angular 5

Я добавил CORS в заголовок, но все еще получаю сообщение о проблеме CORS в своем запросе. Как правильно добавлять и обрабатывать CORS и другие запросы в заголовках?Вот код служебного файла:import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http'; const httpOptions = { headers: new HttpHeaders({ 'Access-Control-Allow-Origin':'*', 'Authorization':'authkey', 'userid':'1' }) }; public baseurl = 'http://localhost/XXXXXX'; userAPI(data): Observable { return this.http.post(this.baseurl, data, httpOptions) .pipe( tap((result) => console.log('result-->',result)), catchError(this.handleError('error', [])) ); } Ошибка: Ответ на предварительный запрос не проходит проверку управления доступом: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Таким образом, источник 'http://localhost:4200' не имеет доступа сбой: Ответ об ошибке HTTP для (неизвестный URL): 0 Неизвестная ошибка В моем серверном коде я добавил CORS в индексный файл.header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS'); header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
A

Aman Kumar

4 года назад

Ответов: 8

Jest - Простые тесты медленные

Я использую Jest для тестирования углового приложения, и выполнение простых тестов занимает очень много времени, и я не могу понять, почему.Моя настройка Jest в package.json:"jest": { "modulePaths": [ "/src", "/node_modules" ], "testPathIgnorePatterns": [ ".git/.*", "node_modules/.*" ], "transformIgnorePatterns": [ "node_modules/.*", ".*\\.js" ], "setupTestFrameworkScriptFile": "/src/setupJest.js", "preset": "jest-preset-angular", "testEnvironment": "jsdom", "testRegex": "src/app/.*\\.spec\\.ts$", "moduleFileExtensions": [ "ts", "js", "json" ], "verbose": true, "cacheDirectory": ".jest-cache", "coveragePathIgnorePatterns": [ ".*\\.(shim\\.ngstyle|ngfactory)\\.ts" ], "globals": { "ts-jest": { "tsConfigFile": "./tsconfig.json" }, "__TRANSFORM_HTML__": true } } Файл установки My Jest: 'use strict'; require('core-js/es6/reflect'); require('core-js/es7/reflect'); require('zone.js'); require('zone.js/dist/proxy.js'); require('zone.js/dist/sync-test'); require('zone.js/dist/async-test'); require('zone.js/dist/fake-async-test'); require('jest-zone-patch'); const getTestBed = require('@angular/core/testing').getTestBed; const BrowserDynamicTestingModule = require('@angular/platform-browser-dynamic/testing').BrowserDynamicTestingModule; const platformBrowserDynamicTesting = require('@angular/platform-browser-dynamic/testing') .platformBrowserDynamicTesting; getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() ); Вот мой простой тест:fdescribe('RichTextEditorComponent', () => { it('should be fast', () => { expect(true).toBeTruthy(); }); }); Кто-нибудь знает, почему это занимает более 9 секунд?
T

Tucker

5 лет назад

Ответов: 6

Ошибка: невозможно присвоить ссылку или переменную! Угловой 4

Я получаю сообщение об ошибке в angular 4 после добавления нового html-кода, ранее форма работала нормально. Я попытался прокомментировать новый код, но он все еще не работает. Что делать?Мой код: Username is required Password is required Log In Ошибка, которую я получаю:Error: Cannot assign to a reference or variable! at _AstToIrVisitor.visitPropertyWrite (webpack-internal:///../../../compiler/esm5/compiler.js:26550:23) at PropertyWrite.visit (webpack-internal:///../../../compiler/esm5/compiler.js:4895:24) at convertActionBinding (webpack-internal:///../../../compiler/esm5/compiler.js:26000:45) at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28519:22) at Array.forEach () at ViewBuilder._createElementHandleEventFn (webpack-internal:///../../../compiler/esm5/compiler.js:28515:18) at nodes.(anonymous function) (webpack-internal:///../../../compiler/esm5/compiler.js:27934:27) at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28460:22) at Array.map () at ViewBuilder._createNodeExpressions (webpack-internal:///../../../compiler/esm5/compiler.js:28459:56) at _AstToIrVisitor.visitPropertyWrite (webpack-internal:///../../../compiler/esm5/compiler.js:26550:23) at PropertyWrite.visit (webpack-internal:///../../../compiler/esm5/compiler.js:4895:24) at convertActionBinding (webpack-internal:///../../../compiler/esm5/compiler.js:26000:45) at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28519:22) at Array.forEach () at ViewBuilder._createElementHandleEventFn (webpack-internal:///../../../compiler/esm5/compiler.js:28515:18) at nodes.(anonymous function) (webpack-internal:///../../../compiler/esm5/compiler.js:27934:27) at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28460:22) at Array.map () at ViewBuilder._createNodeExpressions (webpack-internal:///../../../compiler/esm5/compiler.js:28459:56) at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:824:31) at resolvePromise (webpack-internal:///../../../../zone.js/dist/zone.js:795:17) at eval (webpack-internal:///../../../../zone.js/dist/zone.js:873:17) at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:425:31) at Object.onInvokeTask (webpack-internal:///../../../core/esm5/core.js:4944:33) at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:424:36) at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:192:47) at drainMicroTaskQueue (webpack-internal:///../../../../zone.js/dist/zone.js:602:35) at Я искал в Интернете и нашел вопросы и ответы для той же ошибки, но у меня не было решения, которое сработало бы для меня ... Вот почему эта ошибка может повторяться, но ответ, кажется, отличается от многих. * 100002*
A

Abdeali Chandanwala

4 года назад

Ответов: 1

Angular2 - параметры запроса Http POST

Я пытаюсь сделать POST-запрос, но он не работает:testRequest() { var body = 'username=myusername?password=mypassword'; var headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); this.http .post('/api', body, { headers: headers }) .subscribe(data => { alert('ok'); }, error => { console.log(JSON.stringify(error.json())); }); } Я в основном хочу воспроизвести этот http-запрос (не ajax), как будто он был создан html-формой:URL-адрес: /apiПараметры: имя пользователя и пароль
C

Christopher

6 лет назад

Ответов: 9

Нашел синтетическое свойство @enterAnimation. Включите в свое приложение либо "BrowserAnimationsModule", либо "NoopAnimationsModule". угловой4

При запуске Karma для тестирования моего приложения Angular4 я получаю эту ошибку Обнаружено синтетическое свойство @enterAnimation. Пожалуйста, включите в свое приложение "BrowserAnimationsModule" или "NoopAnimationsModule". хотя я уже импортировал модуль в app.module.ts // animation module import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ... @NgModule({ imports: [... BrowserAnimationsModule, ... ], и в моем component: import { Component, OnInit } from '@angular/core'; import { trigger, state, style, animate, transition } from '@angular/animations'; @Component({ selector: 'app-about', animations: [ trigger( 'enterAnimation', [ transition(':enter', [ style({ transform: 'translateX(100%)', opacity: 0 }), animate('500ms', style({ transform: 'translateX(0)', opacity: 1 })) ]), transition(':leave', [ style({ transform: 'translateX(0)', opacity: 1 }), animate('500ms', style({ transform: 'translateX(100%)', opacity: 0 })) ]) ] ), trigger( 'enterAnimationVetically', [ transition(':enter', [ style({ transform: 'translateY(100%)', opacity: 0 }), animate('500ms', style({ transform: 'translateY(0)', opacity: 1 })) ]), transition(':leave', [ style({ transform: 'translateY(0)', opacity: 1 }), animate('500ms', style({ transform: 'translateY(100%)', opacity: 0 })) ])] ) ], ... Приложение отлично работает с ng serve однако я получил эту ошибку с кармой.
M

Melchia

4 года назад

Ответов: 8

Как правильно поймать исключение из http.request()?

Часть моего кода: import {Injectable} from 'angular2/core'; import {Http, Headers, Request, Response} from 'angular2/http'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/map'; @Injectable() export class myClass { constructor(protected http: Http) {} public myMethod() { let request = new Request({ method: "GET", url: "http://my_url" }); return this.http.request(request) .map(res => res.json()) .catch(this.handleError); // Trouble line. // Without this line code works perfectly. } public handleError(error: Response) { console.error(error); return Observable.throw(error.json().error || 'Server error'); } } myMethod() создает исключение в консоли браузера: ИСХОДНОЕ ИСКЛЮЧЕНИЕ: TypeError: this.http.request(...).map(...).catch не является функцией
N

Nick

6 лет назад

Ответов: 5

Angular 5 Прокрутите вверх при каждом щелчке по маршруту

Я использую angular 5. У меня есть панель инструментов, на которой есть несколько разделов с небольшим содержимым и несколько разделов с таким большим содержимым, что я сталкиваюсь с проблемой при смене маршрутизатора при переходе наверх. Каждый раз, когда мне нужно прокрутить, чтобы перейти наверх. Может ли кто-нибудь помочь мне решить эту проблему, чтобы при смене маршрутизатора мой вид всегда оставался наверху.Заранее спасибо.
r

raihan

4 года назад

Ответов: 21

Навигация запущена за пределами зоны Angular, вы забыли вызвать ngZone.run()?

Я использую Angular 7 и столкнулся с проблемой => после входа в систему API GET успешно вызывает и компонент также получает данные, но пользовательский интерфейс не отображает эти данные.Когда я открываю консоль браузера, данные немедленно заполняются пользовательским интерфейсом, и в консоли отображается предупреждение. "core.js:15686 Навигация запущена за пределами зоны Angular, вы забыли вызвать 'ngZone.run()'?" Я погуглил это предупреждение и нашел обходной путь, например this.ngZone.run(), и вызвал внутри него свои API.Но проблема в том, что я использую более 40 компонентов и вызываю так много API в каждом компоненте. Поэтому мне приходится вызывать ngZone.run() при каждом вызове API, что кажется сложным.Пожалуйста, предложите мне лучший способ решить эту проблему. Заранее спасибо. приложение.component.ts getEmployees(): void { this.employeeService.getEmployees().subscribe(e => { this.employees = e; }); } приложение.service.ts @Injectable() export class EmployeeService { constructor(private httpClient: HttpClient) { } getEmployees() { return this.httpClient.get('employees'); }
E

Er Vipin Sharma

3 года назад

Ответов: 6

Как обновить Angular CLI до последней версии

Используя ng --version я получил: @угловой/кли: 1.0.0 это не последняя доступная версия.Поскольку в моей системе глобально установлен Angular CLI, для его обновления я попытался:npm обновить angular-cli -gНо это не работает, так как осталась версия 1.0.0.
F

Francesco Borzi

5 лет назад

Ответов: 10

Как на самом деле развернуть приложение Angular 2 + Typescript + systemjs?

На angular.io есть руководство для быстрого старта, в котором используются typescript и systemjs. Теперь, когда у меня запущено это мини-приложение, как мне создать что-то развертываемое? Я не смог найти никакой информации об этом.Нужны ли мне дополнительные инструменты, дополнительные настройки в System.config?(Я знаю, что мог бы использовать webpack и создать один bundle.js, но я хотел бы использовать systemjs, поскольку он используется в руководстве)Может ли кто-нибудь поделиться своим процессом сборки с этой настройкой (Angular 2, TypeScript, systemjs)
B

Brian G. Bell

6 лет назад

Ответов: 6

Angular 2 Как перенаправить на 404 или другой путь, если путь не существует

Я пытался перенаправить 404 / другой путь, если путь не существует в angular 2Я пытался исследовать, есть какой-то метод для углового 1, но не для углового 2.Вот мой код:@RouteConfig([ { path: '/news', name: 'HackerList', component: HackerListComponent, useAsDefault: true }, { path: '/news/page/:page', name: 'TopStoriesPage', component: HackerListComponent }, { path: '/comments/:id', name: 'CommentPage', component: HackerCommentComponent } ]) Например, если я перенаправляюсь на /news/page/, тогда это работает и возвращает мне пустую страницу, как вы справляетесь с таким случаем?
J

Jason Seah

6 лет назад

Ответов: 5

Неперехваченная ошибка: Неожиданный модуль «FormsModule», объявленный модулем «AppModule». Пожалуйста, добавьте аннотацию @Pipe/@Directive/@Component

Я новичок в Angular. Я начал Tour of Heroes, чтобы изучить его. Итак, я создал app.component с привязкой two-way.import { Component } from '@angular/core'; export class Hero { id: number; name: string; } @Component({ selector: 'app-root', template: ` {{title}} {{hero.name}} details! id: {{hero.id}} Name: `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; } Следуя руководству, я импортировал FormsModule и добавил его в массив объявлений. На этом шаге появилась ошибка:import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent, FormsModule ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Вот ошибка: Необработанная ошибка: Неожиданный модуль «FormsModule», объявленный модулем «AppModule». Пожалуйста, добавьте аннотацию @Pipe/@Directive/@Component.
V

Vlad Poltorin

5 лет назад

Ответов: 4

Angular: ручное перенаправление на маршрут

Я совсем недавно начал использовать angular 4 вместо angular.js 1.Я следил за учебником героев, чтобы узнать об основах angular 4, и в настоящее время я использую собственный «RouterModule» angular из пакета «@angular/router».Чтобы реализовать некоторую авторизацию для моего приложения, я хотел бы знать, как вручную перенаправить на другой маршрут, я не могу найти никакой полезной информации об этом в Интернете.
S

Stan Hurks

4 года назад

Ответов: 8

2022 WebDevInsider