小编c_o*_*goo的帖子

在使用 firebase 配置 angular 后尝试“ng serve”时，出现错误。即使我用谷歌搜索了这个错误信息，但找不到任何东西。在错误消息中，此问题与库本身有关。

user@user-MacBookPro post % ng serve
10% building 3/3 modules 0 active? ?wds?: Project is running at http://localhost:4200/webpack-dev-server/
? ?wds?: webpack output is served from /
? ?wds?: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.15 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.78 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 …

从Angular 4.3.5迁移到4.3.6之后动画的东西变坏了(4.3.5就是一切都好).

问题是,当应用程序启动时,会加载登录组件,并且该组件fadeIn会显示动画.升级到最新的角度版本后,我的组件在加载应用程序后总是隐藏.我检查了登录组件,发现它已经style="display: none";应用了.

我正在使用外部animations.ts文件来存储我的所有动画.

animations.ts

import { animate, state, style, transition, trigger } from '@angular/animations';

// Fade In Animation
export const fadeIn = trigger('fadeIn', [
    transition('void => *', [
        style({ opacity: 0 }),
        animate(500, style({ opacity: 1 }))
    ])
]);

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from '../../services/authentication.service';

import { fadeIn } from './../../shared/animations/animations';

@Component({
    moduleId: module.id,
    selector: 'app-authentication',
    templateUrl: './authentication.component.html',
    styleUrls: ['./authentication.component.css'], …

所以当在Angular-CLI app中遇到麻烦时.

这是发生的事情: ng serve,不ng serve --aot产生例外,一切正常.只ng serve --prod在浏览应用程序时运行休息时间.

错误TypeError:(void 0)不是函数

正在寻找答案,并发现这些不是,所以我在应用程序中的每个属性之前写了'public'并检查提供程序中是否有函数调用,但没有任何改变.

接下来我尝试用--aot旗帜运行它并且工作得很好,但是在--prod出现相同错误时仍然崩溃.

它在runnig登录过程中完全崩溃,这是:

• 使用登录名和密码数据发送http POST
• 如果请求解析,则调度ngRx-Store自定义登录事件(简单标志)
• 然后router.navigateByUrl到另一个页面

奇怪的是,我到处都有类似的过程,但它在确切的位置崩溃了.

可以请有人给我一些信息,我应该在哪下挖？干杯!

更新:我在登录过程的每个部分都在切断代码,然后用--prod它构建它,结果发现来自@ angular/material的MatDialog产生了错误.在MatDialog登录组件使用afterClosed()挂钩到其父级解析后触发登录,并以某种方式产生异常.

因此,触发弹出窗口的父级是HeaderComponent,其中包含方法:

    openLoginDialog(): void {
        this.authService.login();
         const dialogRef = this.dialog.open(LoginDialogComponent);
         dialogRef.afterClosed().subscribe(result => {
           if (result) {
             this.authService.login();
           }
        });
      }

在LoginDialogComponent里面是简单解决的方法:

    login(login, password) {
      this.authService.tryLogin(login, password).subscribe(data => {
        this.dialogRef.close(true);
      });
    }

在我删除MatDialog后,另一个单词摆脱了项目中唯一的弹出窗口,错误消失了.我已经创建了另一个具有自己的Login表单路由的组件,但仍然认为删除整个工作模块是因为构建错误不是解决方案.

我的package.json:

    "dependencies": {
        "@angular/animations": "^5.0.2",
        "@angular/cdk": "^5.0.0-rc.1",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/core": "^5.0.0",
        "@angular/flex-layout": …

情况:

在我的Ionic 2应用程序中,我需要将菜单按钮分为两行:图标和文本.

问题是,离子按钮指令以某种方式迫使按钮在一条线上.

我需要使用ion-button指令来确保按钮始终具有正确的格式和响应位置.我只需要两个按钮就可以了.

这是我尝试的html和css:

HTML:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle="left" start>
      <ion-icon name="menu"></ion-icon> 
      <br />
      <p class="menuSubTitle">MENU</p>
    </button>
    <ion-title>
      HomePage
    </ion-title>
    <button ion-button menuToggle="right" end>
      <ion-icon name="person"></ion-icon>
      <br />
      <p lass="menuSubTitle">LOGIN</p>
    </button>
  </ion-navbar>
</ion-header>

CSS:

.menuSubTitle {   
  font-size: 0.6em;
  float:left;
  display: block;
  clear: both;
}

问题:

如何在两条线上制作离子按钮？

谢谢!

我对 Angular 很陌生。我最近在我的应用程序项目中添加了类似于下面的 Angular Material 选项卡。

<mat-tab-group>
  <mat-tab label="First"  class="firstTab"> Content 1 </mat-tab>
  <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
  <mat-tab label="Third"  class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

在我的应用程序中，我有时需要让用户注意某些选项卡。我正在考虑的方法是通过赋予其以下品质来突出显示感兴趣的选项卡：

.highLightTab{
   border-width: 9px;
   border-style: solid;
   border-color: orange;
}

实现上述目标的传统方法是通过

$(".secondTab").addClass("highLightTab");

然而，事实证明这是不可能实现的，因为我无法为运行时生成的任何 Mat-X 元素自定义 CSS 类/CSS 样式。

谁能告诉我如何实现这一目标？

我有两个对象数组，如下所示：

result = [{id:24, name:"xyz"}, {id:45,name:"tze"}]
moreDetails = [{id:24, name2:"hyi"}, {id:45, name2:"tikw"}]

我想要一个上面这样的合并结果

mergedResult= [{id:24, name:"xyz", name2:"hyi"}, {id:45,name:"tze", name2:"tikw"}]

请注意合并发生在id，这两个数组都有。

我试图遵循这个How to merge these arrays/json objects? 而这个我如何动态合并两个 JavaScript 对象的属性？

但是，我想我迷路了，我的问题可能需要一个简短而简单的解决方案。

编辑

我试图简化我的例子。实际上，上面两个数组只是有一个id共同点，它们不仅仅是name，name2。例如，有时result数组将具有id, name, name2, name3 并且moreDetails将具有id, name, name4. 我想说的是，我并不总是提前知道两个数组除了id. 因此，我不能像某些答案所建议的那样对字段名称进行硬编码。

我正在创建一个离子应用程序，因为我需要在主页中添加背景图像。图像尺寸为1280*698.

我试过下面的代码，

CSS：

#homecontent {
  background-image: url('../img/home2.png') !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

HTML：

<ion-content id="homecontent"></ion-content>

我的问题是，背景图像没有响应。我怎样才能做到这一点？

你好，我正在尝试使用 Angular 来使用 redux。但当我尝试运行我的角度应用程序时，出现此错误消息：

ERROR in node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(10,31): error TS2420: Class 'NgRedux<RootState>' incorrectly implements interface 'ObservableStore<RootState>'.
  Types of property 'dispatch' are incompatible.
    Type 'Dispatch<RootState>' is not assignable to type 'Dispatch<AnyAction>'.
      Type 'RootState' is not assignable to type 'AnyAction'.
node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(37,33): error TS2344: Type 'RootState' does not satisfy the constraint 'Action<any>'.
node_modules/@angular-redux/store/lib/src/components/root-store.d.ts(18,24): error TS2344: Type 'RootState' does not satisfy the constraint 'Action<any>'.
node_modules/redux-observable/index.d.ts(32,56): error TS2344: Type 'S' does not satisfy the constraint 'Dispatch<AnyAction>'.

我的减速机：

export default function reducer(state= {
  persones: [],
  selectedPersone: {}, …

我有一个显示 API 查询结果的组件。我想添加一个下拉框，以便可以过滤列表，但当 url 查询参数更改时，我似乎无法重新加载页面。

<div>
  <H2>Products</H2>
  <form>
    Filter By Manufacturer
    <select (change)="onManufacturerChange($event.target.value)">
      <option value="">All</option>
      <option [value]="m" *ngFor="let m of manufacturers">{{m}}</option>
    </select>
  </form>
  <ul>
    <li *ngFor="let p of products"><B>{{p.manufacturer}}</B> - {{p.name}}</li>
  </ul>
</div>

和打字稿

export class ProductListComponent implements OnInit {

  public products: Array<object> = [];
  public manufacturers: any = [];
  public manufacturer: string = "";
  public search: string = "";

  constructor(private _assetService: AssetService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      console.log(params);
      if('manufacturer' in params){ …

我对 angular/ionic 很陌生，我正在尝试创建一个带有默认选中复选框的表单。

它尝试了两个

checked

和

checked="true"

但两者都不起作用。奇怪的是，属性“禁用”工作得很好。

这是我的 html：

checked

这是它的样子：

我在装有最新 Safari 浏览器的 MacBook Pro 上使用 angular8 和 ionic4。有任何想法吗？