标签: angular5

我大约两个月前开始了Angular 4 Material项目，当时安装了所有当前的npm，并且正在使用material.angular.io中的大多数组件。从那时起，Angular 5.0.0已经推出。我通过项目在新的更新上进行了重建，并且控制台出现以下错误。

错误：模板解析错误：'mat-card'不是已知元素：1.如果'mat-card'是Angular组件，则请验证它是否属于此模块。2.如果“ mat-card”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。

我已经检查了安装，并相信我已经拥有了所有当前功能，但是以前可以运行的代码现在失败了。这是A5的新要求，还是材料包装尚未准备就绪？

我正在学习角度5,我一直在尝试使用.next方法添加data.service.ts尝试这个:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()

export class DataService {

  private go = new BehaviorSubject<any>([' First Goal','Second Goal']);

  newvar = this.go.asObservable();

  constructor() { }

  changeGoal(newvar){
    this.newvar.next(this.go);
  }

}

我收到了这个错误:'Observable'类型中不存在"属性'下一个'";

我希望通过对服务器的服务调用来接收HTML数据(这是肯定的.我不能将模板保存在本地)并在内部操作它们如何显示它(作为模态或整页).带有Angular标记的HTML应该循环到一个组件并一起工作.在Angular JS中大多数是$ compile.

我正在开发Angular 5中的解决方案,并且应该与AOT编译器兼容.我已经提到了几个解决方案,并且对已弃用和更新的解决方案感到困惑.请帮我.我相信你的最新答案也可以帮助很多其他人..非常感谢你提前!

我使用材料(https://material.angular.io/components/datepicker/overview)作为角度5.我们可以在DatePicker中选择年份和月份(我不想选择日期,默认情况下必须选择日期) ？例如: - 如果用户选择7月/ 2017,则组件将其解析为7月的第一天.像新约会(2017,6,1);

我有一个httpClient帖子,通过服务,没有给我任何错误,但它也没有将数据发布到数据库.

这是代码:

dataService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DataService {

  constructor(private http: HttpClient) {}

  insertData() {
    const body = JSON.stringify({firstName: 'Joele', lastName: 'Smith4'});
    return this.http.post('http://myurl/index.php', body, httpOptions);
  }

}

app.component.ts

import { Component } from '@angular/core';
import { DataService } from './services/data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(private dataService: DataService) {} …

我有一个父组件,里面有一个子组件.父组件有一些css类,其中子组件扩展它们.我尝试使用:host作为查看文档,但似乎无法让它正常工作.

子组件:

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>

父组件:

         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim …

我在我的项目angular5中使用ng-select 2.0.0,就像在 这个链接中一样 ,我可以从api rest spring boot获得结果,但是当我点击ng-select时我遇到了一个问题我得到了这个错误:

ERROR TypeError: Object(...) is not a function
at NgDropdownPanelComponent.ngOnInit (ng-select.js:1450)
at checkAndUpdateDirectiveInline (core.js:12352)
at checkAndUpdateNodeInline (core.js:13876)

而且我也不能选择我想要的信息(在这种情况下属性'nom'),就像ng select被阻止或者像这样的东西.

这是我的project.component.html代码

<ng-select  *ngIf="_listClients"
             [items]="listClient"
              bindLabel ="nom"
              bindValue ="id"
            [(ngModel)]="selectedPersonId">

</ng-select>

<p>
  Selected city ID: {{selectedPersonId | json}}
</p>

这是文件project.component.ts

    import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ProjetService} from '../../../../../service/projet.service';
import {Projet} from '../../Models/Projet';
import { ModalDirective } from 'ngx-bootstrap/modal';
import 'rxjs/add/operator/map';
import {ClientService} from '../../../../../service/client.service';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html', …

我有一个电子邮件字段,我添加了两个验证器(必需,电子邮件),我想检查验证状态,input event以便在我的系统成员有效时调用API检查剂量,如果它invalid不调用API并且不要t在页面上显示错误消息.

我将在模糊事件(focusOut电子邮件的输入)上显示错误消息,首先我用于formControl.validator(formControl)触发验证器并检查formControl.valid,我获得了有效状态,但它会在页面上显示错误消息,因为我订阅statsuChange时显示错误消息,当状态等于invalid.

目前,我在一个变量中保存验证器并传递initEmailChaingeEvent()给检查验证状态而没有statusChange事件.它可以工作,但我认为这不是一个好方法,这是我的实现的一个例子:

实例

export class AppComponent {
  public sampleForm: FormGroup;

  @ViewChild('emailElm')
  emailElm: ElementRef;

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    const emailValidtors = [
      Validators.required,
      Validators.email
    ]

    const emailFC = new FormControl(null, {
      validators: emailValidtors,
      updateOn: 'blur'
    });
    //
    this.sampleForm = new FormGroup({
      'email': emailFC
    });
    //
    this.initEmailChaingeEvent({
      emailFC: emailFC,
      validtors: emailValidtors
    });
    //
    this.sampleForm.valueChanges.subscribe((val) => {
      console.log('_blue event:valueChanges', val)
    });
    //
    this.initShowErrorMsgEvent({
      fc: emailFC
    }); …

就我而言，我想以不区分大小写的方式支持相同的网址。

示例：它应该支持所有网址

localhost:1029/documentation
localhost:1029/DOCUMENTATION
localhost:1029/DOCUMENTAtion
localhost:1029/docuMENTATION

我在项目中使用Angular 5.2版本.我在index.html中动态设置基本引用,以满足不同客户端的不同URL.

应用主页面网址如下所示: -

http://example.com/client1/app/login
http://example.com/client2/app/login
http://example.com/client3/app/login

client1,client2等是IIS 中的虚拟目录.

当我在浏览器中运行应用程序时,我可以从检查窗口看到重复的块正在加载并导致应用程序页面变慢.

有一件事我观察了重复块的Web请求URL.让我们说script.xxxxxxxxxxxxxxxxxxxxxx.bundles.css.

第一个网络请求: - https://example.com/client1/scripts.7186135389ca4b63fab4.bundle.js

第二个网络请求(重复): - https://example.com/scripts.7186135389ca4b63fab4.bundle.js

不需要第二个Web请求.我无法估计它是如何出现的.

Index.html在我的项目中看起来像这样: -

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Web</title>
        <link href="/assets/Images/favicon.ico" rel="shortcut icon" type="image/x-icon">
        <base id="baseHref" href="/">
        <script>
            (function () {
                if (window.location.hostname !== 'localhost') document.getElementById('baseHref').href = "/" + window.location.pathname.split('/')[1] + "/";
            })();
        </script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <app-root></app-root>
    </body>
    </html>

请建议,如何纠正这个问题.