小编zgu*_*gue的帖子

我有一个组件接收一个image对象数组作为Input数据.

export class ImageGalleryComponent {
  @Input() images: Image[];
  selectedImage: Image;
}

我想在组件加载时将selectedImage值设置为images数组的第一个对象.我试图在OnInit生命周期钩子中这样做:

export class ImageGalleryComponent implements OnInit {
  @Input() images: Image[];
  selectedImage: Image;
  ngOnInit() {
    this.selectedImage = this.images[0];
  }
}

这给了我一个错误Cannot read property '0' of undefined,这意味着images在这个阶段没有设置值.我也尝试了OnChanges钩子,但我卡住了,因为我无法获得有关如何观察阵列变化的信息.我怎样才能达到预期的效果？

父组件如下所示:

@Component({
  selector: 'profile-detail',
  templateUrl: '...',
  styleUrls: [...],
  directives: [ImageGalleryComponent]
})

export class ProfileDetailComponent implements OnInit {
  profile: Profile;
  errorMessage: string;
  images: Image[];
  constructor(private profileService: ProfileService, private   routeParams: …

编译失败.

./src/app/hero.service.ts找不到模块:错误:无法解析'C:\ Users\Admin\angular\myheroes\src\app'中的'rxjs/Observable/of'

@ ./src/app/hero.service.ts 13:11-40 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Run Code Online (Sandbox Code Playgroud)

我的代码为hero.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { of } from 'rxjs/Observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { MessageService } from './message.service';

@Injectable()
export class HeroService {

   constructor(private messageService: MessageService) { }

  getHeroes(): Observable<Hero[]>

  {
    // todo: send the message _after_fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of (HEROES);
  }
}

我有这个Docker Compose配置,我只需创建一个NodeJS容器并在其中安装Angular CLI.

之后docker-compose up -d,我能够在容器内部使用SSH docker-compose run node bash.ng new效果很好但ng serve似乎不起作用.它正确启动,控制台没有错误.但是,如果我访问localhost(ad我将端口4200映射到80),则无法加载.

我错过了什么吗？

我正在学习如何创建博客网站。我首先尝试了一个简单的例子。但是文本编辑器没有显示在我的屏幕上。我用npm install --save quill@1.3.6 ngx-quill命令安装了 Quill 。我app.component.html的很简单。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand ml-auto mr-auto" href="#">Quill JS Editor with Angular</a>
</nav>

<div class="container">
  <div class="row pt-5">
    <div class="col-md-8">
      <form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="editor">
            <h3>Editor</h3>
          </label>
          <quill-editor></quill-editor>
        </div>
      </form>
    </div>
    <div class="col-md-4 bg-light p-4">
      <h3>Output</h3>
      <p class="my-5"></p>
    </div>
  </div>
</div>

其实应该是这样的。

我还引进FormGroup并FormControl从@angular/forms我的app.component.ts包含以下代码。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'; …

TL;DR：我正在尝试使用Angular Elements作为Angular应用程序的插件。如果我在我的应用程序上使用--prod它构建元素ng serve（开发设置），但是当我ng serve --prod在我的应用程序上使用它时或在ng build --prod我的应用程序（生产设置）之后使用它时它会无限重新加载。

但是，如果我构建了元素添加--optimization=false，则适用于我的高效应用程序，但不适用于我的开发设置。

关键是，我期待的是建立一个角形元件用--prod就可以了，对于两种情况。

问题：有没有办法解决这个问题？

现在，长读。

在工作中，我们试图在我们的Angular站点中使用可配置的插件，其中服务器是告诉哪个插件处于活动状态的。

我们尝试动态加载Angular模块，但这是一个完全不同的问题，我们又把它搁置一旁。

所以，我们接下来想要尝试的是Angular Elements，它有点工作，除非我们按照它应该的方式构建所有东西。

首先，我开始关注本教程https://scotch.io/tutorials/build-a-reusable-component-with-angular-elements/amp并忽略了所有内容，okta因为我的功能有所不同。

创建：

我使用下一个命令创建了我的核心应用程序，这将是托管插件的应用程序：

• ng new core --routing --skip-git --style scss --skip-tests --minimal

然后我使用这个命令创建了一个插件/角度元素：

• ng new plugin --skip-git --style scss --skip-tests --minimal

插入：

所有的创作后，我走进我的插件，并在评论这条线polyfills.ts，我在这个网站阅读的地方，它解决的问题NgZone已经加载，这是正确的：

// import 'zone.js/dist/zone';  // Included with Angular …

我正在尝试根据select下拉组件传递的值来过滤数据表组件.我使用的是@Input()属性,但所选的下拉数据没有传递给数据表组件.如果它被传递,我将能够使用以下逻辑过滤表:

不知道我在哪里做错了.

onChangeDetected(val){ 
  this.someData= this.someData.filter(x => x.value== val)
}

完整的实施可以在这里找到

我一直在阅读有关Angular 2的样式封装方法的信息，您可以在其中将样式直接写入组件中。

此方法可以使用本机阴影dom或模拟的dom。将这两种方式用于特定于组件的样式都有哪些性能优势？

我使用VS2017提供的SPA模板创建了一个Asp.net Core Angular 2应用程序.一切都在当地很好.但是当作为Web应用程序发布到Azure时,会发生以下错误:

AggregateException:发生一个或多个错误.(尝试连接到节点在60000ms后超时.)

我检查了stdout文件,在上面之前我也看到了以下错误:

Microsoft.AspNetCore.Server.Kestrel [0]无法在IPv6环回接口上绑定到 http:// localhost: 19013:'错误-4090 EADDRNOTAVAIL地址不可用'.

我也没有在网上找到太多,没有代码更改我的结束,它只是默认模板.

最近,在开发动画组件时,我遇到了这个术语synthetic property.

<bmx-panel [@sidebarState]="state">

  <i bmxPanelHeader (click)="toggle($event)"
     class="fa fa-angle-double-right fa-lg"></i>
  ...    
</bmx-panel>

在我的情况下,[@sidebarState]="state"当函数state更改属性时,合成属性会触发组件的展开/折叠动画toggle.

方法的第一个参数trigger是相应合成属性的名称@sidebarState.

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
  animations: [
    trigger('sidebarState', [
      state('expanded', style( { width: '240px' } )),
      state('collapsed', style({ width: '40px' })),
      transition('expanded => collapsed', animate('350ms ease-in')),
      transition('collapsed => expanded', animate('350ms ease-out'))
    ])
  ]
})
export class SidebarComponent  {  
  public state = 'expanded';

  constructor() {}

  toggle(event: any) {    
    this.state = this.state === "expanded" …

我有一个 angular 4 的前端，一个 ASP.NET Core WebAPI 的后端，它们的功能是，将数据和一个人的简历发送到一个 SQL Server 数据库，但是......总是捕获数据并将文件发送到数据库的方法的 IFormFile 为空。

我已经尝试了在互联网上找到的所有类型的解决方案，但没有一个对我有用。

作为 Post 方法的响应，我收到此异常

An unhandled exception occurred while processing the request.  
  NullReferenceException: Object reference not set to an instance of an object.  
  WebApplication.Controllers.CandidateController+<Post>d__4.MoveNext() in CandidateController.cs, line 60

在这里，我粘贴了执行此操作的项目的部分代码。

完整代码的github链接：
前端代码
后端代码

HTML

<form class="col-md-6 offset-md-3" method="POST" enctype="multipart/form-data" #form="ngForm" (ngSubmit)="onSubmit(form)">
  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" placeholder="Nome completo" id="name"  name="name" ngModel />
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-sm-2 col-form-label">Email</label> …