Questions tagged «angular»

在运行Karma测试Angular4应用程序时，Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.尽管我已经将模块导入了app.module.ts，但仍收到此错误 。 // animation module import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ... @NgModule({ imports: [... BrowserAnimationsModule, ... ], 在我的组件中： import { Component, OnInit } from '@angular/core'; import { trigger, state, style, animate, transition } from '@angular/animations'; @Component({ …

76 javascript  angular  typescript  testing  karma-jasmine 

我正在研究ng2实现。我正在使用以下函数调用将对象转换为数组： var authors = Object.entries(responseObject.Authors); 这是一个标准的js函数。但是，ts编译器返回以下错误： "Property 'entries' does not exist on type 'ObjectConstructor'" 根据一个快速的谷歌，似乎解决方案可能是将CompilerOptions target属性从es5更改为es6。但是，在对以前的问题进行了一些先前的研究之后，我认为我可以通过在下面的tsconfig.json中包含其他“ lib”属性来利用es6功能： "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, "module": "commonjs", "noEmitOnError": true, "noImplicitAny": false, "outDir": "../Scripts/", "removeComments": false, "sourceMap": true, "target": "es5", "moduleResolution": "node", "lib": [ "es2015", "dom" ] } 我也尝试将target属性更改为es2015，然后重建项目并执行“ typescriptUsingTsConfig”，但仍然遇到相同的错误。知道我可以在这里做什么以利用Object.entries（）函数吗？

76 javascript  angular  typescript  ecmascript-6  es2017 

我有一个自定义管道，名为 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.ts import …

76 angular  typescript  pipe  angular-module 

我有使用模板驱动的蓝图的表单，所以像这样： <form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)"> <input #name="ngModel" [(ngModel)]="name"> <button type="submit">Submit form</button> </form> 现在，如何防止ENTER提交表单？它会干扰表单内部的自定义ENTER行为，并且还会干扰您在输入中无意按Enter的情况，这是不必要的。 我环顾四周，找到了一些旧的Angular 1答案以及一些标准的JavaScript答案，但是我觉得Angular 2必须已经内置了类似的东西，但我找不到。 如果没有，实现此目标的最佳方法是什么？

76 angular  angular2-forms 

我刚接触angular4。我想要实现的是为应用程序中的不同页面设置不同的布局页眉和页脚。我有三种不同的情况： 登录，注册页面（无页眉，无页脚） 路线：['登录'，'注册'] 营销站点页面（这是根路径，并且具有页眉和页脚，大多数这些部分在登录之前出现） 路线：[''，'关于'，'联系'] 应用程序登录页面（本节中所有应用程序页面的页眉和页脚都有不同，但是此页眉和页脚与营销网站的页眉和页脚不同） 路线：['dashboard'，'profile'] 我通过在路由器组件html中添加页眉和页脚来临时运行该应用程序。 请告诉我一个更好的方法。 这是我的代码： app \ app.routing.ts const appRoutes: Routes = [ { path: '', component: HomeComponent}, { path: 'about', component: AboutComponent}, { path: 'contact', component: ContactComponent}, { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, { path: 'dashboard', component: DashboardComponent …

76 angular  angular-routing  angular-template  angular-router 

我最近一段时间一直在使用Angular-CLI。它带有许多命令，其中包括ng serve旋转服务器的位置localhost:4200。 我习惯于使用Grunt和Gulp，可以对其进行配置以满足自己的需求。我想配置Angular-CLI的服务器，但后来我意识到我不知道它是什么或如何配置。对该项目进行准备serve并没有发现任何有用的东西。 那么，究竟是做ng serve什么的呢？

76 angular  angular-cli 

我正在触发HTTP请求，并且收到了有效的响应。响应中还有一个X-Token我希望阅读的标题。我正在尝试下面的代码来读取标题，但是，结果是null this.currentlyExecuting.request = this.http.request(reqParams.type, reqParams.url, { body: reqParams.body, responseType: 'json', observe: 'response' }).subscribe( (_response: any) => { // Also tried _response.headers.init(); const header = _response.headers.get('X-Token'); console.log(header); onComplete(_response.body); }, _error => { onComplete({ code: -1, message: Constants.WEBSERVICE_INTERNET_NOT_CONNNECTED }); } ); API在Chrome inspect中选中时，的响应表明标题存在。

76 angular  http  typescript  angular5 

我正在构建我的第一个Angular应用程序。我正在使用此命令创建一个新的Angular应用程序ng new purchase-section。但是，当我使用执行应用程序时ng serve -o，出现以下错误。 node_modules / rxjs / internal / types.d.ts（81,44）中的错误：错误TS1005：';' 预期。node_modules / rxjs / internal / types.d.ts（81,74）：错误TS1005：';' 预期。node_modules / rxjs / internal / types.d.ts（81,77）：错误TS1109：需要表达式。 我已经检查了types.d.ts它是由Angular创建的，因此我进行了检查。我无法理解该错误。请注意，在收到此错误后，我删除了该文件，node_modules并使用npm install希望安装的方法安装了此错误。 这是我的package.JSON文件： { "name": "purchase-section", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", …

75 angular  typescript 

我一直试图将属性值传递到组件中。从我阅读的内容来看，一切看起来都是正确的。但是它仍然无法正常工作。我的测试值作为空值输出到屏幕和控制台。:( 这是我的测试组件： import {Component, Input} from 'angular2/angular2'; @Component({ selector: 'TestCmp', template: `Test Value : {{test}}` }) export class TestCmp { @Input() test: string; constructor() { console.log('This if the value for user-id: ' + this.test); } } 这就是我从父页面调用组件的方式。 <TestCmp [test]='Blue32'></TestCmp> 当页面渲染的测试值为空时。我只看到“测试值：”。 代替“测试值：Blue32”。

75 javascript  angular  typescript 

我试图从api中提取数据，并在ionic应用程序中填充它，但是当我进入应该填充数据的页面时，它崩溃了。以下是我的两个.ts文件： import { Component } from '@angular/core'; import { NavController, LoadingController } from 'ionic-angular'; import { RestService } from '../../providers/rest-service/rest-service'; @Component({ selector: 'page-all-patients', templateUrl: 'all-patients.html', providers: [RestService] }) export class AllPatientsPage { data: any; loading: any; constructor(public navCtrl: NavController, public restService: RestService, public loadingCtrl: LoadingController) { this.loading = this.loadingCtrl.create({ content: …

75 angular  typescript  ionic-framework 

在下面的代码中，removeSelectedCountry()当span元素被单击handleKeyDown($event)时应调用，在上发生keydown事件时应调用div。 @Component({ selector: "wng-country-picker", template: ` <ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0"> <li *ngFor="let country of selectedCountries"> <span class="Pill Pill--primary" (click)="removeSelectedCountry(country)"> {{ country.name }} </span> </li> </ul> <div (keydown)="handleKeyDown($event)" class="CountryPicker-input"></div> `, providers: [CUSTOM_VALUE_ACCESSOR] }) 但是removeSelectedCountry()每次Enter按键都被调用。 为了使代码正常工作，我不得不将click事件更改为mousedown事件。现在工作正常。 谁能解释为什么Enter键会触发click事件？ @Component({ selector: "wng-country-picker", template: ` <ul class="CountryPicker-selected" *ngIf="selectedCountries.length > 0"> <li *ngFor="let country of …

75 angular  dom-events 

由于我已经创建@Directive为as SelectableDirective，因此对于如何将多个值传递给自定义指令我有些困惑。我已经搜索了很多，但是没有用Typescript在Angular中得到正确的解决方案。 这是我的示例代码： 父组件为MCQComponent： import { Component, OnInit } from '@angular/core'; import { Question } from '../question/question'; import { AppService } from '../app.service/app.service'; import { SelectableDirective } from '../selectable.directive/selectable.directive'; import { ResultComponent } from '../result-component/result.component'; @Component({ selector: 'mcq-component', template: " ..... <div *ngIf = 'isQuestionView'> <ul> <li *ngFor = 'let …

75 javascript  angular  typescript  angular6 

我正在尝试构建和服务我的项目。它运行正常，我从git更新了它，然后在提供服务时突然出现了一个错误，提示“另一个进程，ID为29800，当前正在运行ngcc。” 我重试了“ npm i”，还重新启动了IDE甚至pc，但是仍然说的一样。

75 angular 

我有一个关于检查对象中是否存在某些字段的问题。 我想打印用户拥有的所有类别，因此我正在执行以下操作： <ul *ngIf="user.categories.length > 0" *ngFor="#category of user.categories"> <li> {{category.name}} </li> </ul> 原因？所有数据均已正确打印，但在Web控制台中出现如下错误： Cannot read property 'name' of null 但是当我做类似的事情时： <ul *ngIf="user.categories.length > 0" *ngFor="#category of user.categories"> <li *ngIf="category"> {{category.name}} </li> </ul> 那一切都好。 我是在做错什么，还是每次都要检查一下？您曾经遇到过这样的问题吗？

74 variables  properties  null  angular 

我有一个使用ajax请求检索对象数组的父组件。 该组件有两个子组件：一个子组件以树结构显示对象，另一个子组件以表格式呈现其内容。父级通过@input属性将数组传递给子级，然后它们正确显示内容。一切都如预期。 当您更改对象内的某些字段时，会发生问题：子组件不会收到有关这些更改的通知。仅当您手动将数组重新分配给它的变量时，才会触发更改。 我已经习惯了使用Knockout JS，并且需要获得类似于observableArrays的效果。 我已经阅读了有关DoCheck的内容，但不确定如何运行。

74 javascript  angular  typescript