标签: angular6

我将我的项目设置为Less in Angular,以便在我的CSS中使用变量的好处.但问题是我必须在每个组件中定义那些不能使其有效的变量.有没有办法将变量设置为globaly？

所以我想摆脱这个:

在我的组件中:

@pink-color: #FC9DB5; // I want to get this from a single
                      // file which I import on each component
header {
  background-color: @pink-color;
  height: 100px;
}

我是Angular的新手，所以我需要一些帮助，我的问题是打电话给http get，我使用service是我的第一个get

我的第一项服务

 getFirstData() { return this.http.get<FirstDataResults ('http://myurl.com/api/Classes/ads', httpOptions);    

我的组件TS文件

this.data.getFirstData().subscribe(
  data => {
    this.firsobjects = data.results;
  },
  err => console.error(err),
  () => this.getComplementData(this.firstobjects)

);

到现在为止，一切都很好，可以获取我的数据，完成后，我运行第二个函数getComplementData

我的第二次服务

 getSecondData(idFirstObject: String) {

return this.http.get<ComplementDataResults>(
  'http://myurl.com/api/Classes/Complement?' +
  'where={'"idFirstObject":"' + idFirstObject + '"}',
  httpOptions); }   

我的组件TS文件

getComplementData(firsobjects) {
this.number = 0;
for (var _i = 0; _i < firsobjects.length; _i++) {
  this.data.getSecondData(firsobjects[_i].id).subscribe(
    (data) => {
        var a = (data.results);
        this.firsobjects[this.number].complements = a;
    }, err => console.log('error ' + err),
    () => console.log('Ok ')
  ); …

我使用Angular 6和Angular Material 6.我想要mat-chip字段.当我输入mat-chip字段时,将启用保存按钮,否则将被禁用.输入字段是必需的,但不能要求mat-chip字段.请帮我找到解决方案.谢谢.

我的示例代码链接在这里:stackblitz demo

我对Angular很新,没有使用AngularJS的经验; 但是我发现我要复制的这个codepen:https://codepen.io/anon/pen/jpZBBQ？edit = 0010

我已经修复了模板中的ng-class和ng-click指令,但我被困在了js上; 我从未见过控制器,$scope或者$timeout在Angular 6应用程序中,所以我不知道该怎么做.任何帮助表示赞赏.

我有以下JSON数据

  {
  "columns": [
    {
      "table": "black_list",
      "name": "id",
      "datatype": "uuid"
    },
    {
      "table": "black_list",
      "name": "emailid",
      "datatype": "varchar"
    },
    {
      "table": "black_list",
      "name": "membershipid",
      "datatype": "varchar"
    },
    {
      "table": "black_list",
      "name": "phonenumber",
      "datatype": "varchar"
    }
  ],
  "rows": [
    {
      "id": "59525ac0-9799-11e8-8ea0-897582b5513d",
      "emailid": "bid@email.com",
      "membershipid": "999999",
      "phonenumber": "1234567890"
    }
  ]
}

我的模型是

export interface BlacklistData {
    id: string;
    emailid: string;
    membershipid: string;
    phonenumber: string;   
}

最后我使用下面的代码从REST API中获取结果，并尝试将其映射到我的对象

public GetBlackListData(): Observable<WatchlistData[]> {
        var path = "http://ec2compute/BDEServices/RestSearch?selectCls=all&fromCls=demo.black_list";
        return this.http.get(path)
            .pipe(map((result: Response) => …

我想使用打字稿或CSS使用Angular 6中的百分比值填充自定义SVG图像。

有没有可用的工具？

自定义图片可以是$，齿轮图标，拇指等。

任何帮助，将不胜感激。

当我编写以下代码时,我正在使用angular6:

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
EditDetail(data) : Observable<Test[]> {
    let url = "http://www.example.com/api/getdetails";     
    return this.httpClient.get(url).map((response: Response) => {
    return <Test[]>response.json();
});

我收到的错误如下:

this.httpClient.get(...).map is not a function

在浏览器控制台中

我也试过了

import { pipe } from 'rxjs';

并使用

return this.httpClient.get(url).pipe(
map((response: Response) => <Test[]>response.json())
  );

但它显示错误

 this.httpClient.get(...).pipe is not a function

我在Angular 6中遇到以下错误。我正在显示从数据库返回的json数据。当我在.ts文件中执行console.log时，它显示了整个数组和数据。即使这样会给出错误消息，指出firstName未定义，它会在相关位置显示正确的firstName。即使我使用*ngIf="user.firstName"该错误仍然相同。如果我在之前在数组中放置了另一个属性，user.firstName则会将错误赋予该属性并显示正确的输出。

例如：

{{user.firstName}}

错误TypeError：无法读取Object.eval中未定义的属性“ firstName ”（作为updateDirectives）

{{user.lastName}}
{{user.firstName}}

错误TypeError：无法读取Object.eval上未定义的属性' lastName '[作为updateDirectives]该错误将仅在此处显示lastName。

我可以知道原因吗？

我有json数据,我想将其转换为对象格式以进行创建操作.

JSON

[
{
    "user": {
        "id": 83,
        "username": "das",
        "first_name": "dsafha",
        "last_name": "dfksdfk",
        "email": "sasda@gmail.com",
        "is_active": true,
        "is_superuser": false
    },
    "role": "testBu"
},
{
    "user": {
        "id": 84,
        "username": "sadfds",
        "first_name": "dshhgds",
        "last_name": "fsdjsl",
        "email": "fdjgd@gmail.com",
        "is_active": true,
        "is_superuser": false
    },
    "role": "testeditrole"
},
{
    "user": {
        "id": 86,
        "username": "fs",
        "first_name": "efhks",
        "last_name": "sofdh",
        "email": "fdshk@gmail.com",
        "is_active": true,
        "is_superuser": false
    },
    "role": "testeditrole"
},
{
    "user": {
        "id": 87,
        "username": "xz",
        "first_name": "vj",
        "last_name": "vkfd",
        "email": "sdsl@gmail.com",
        "is_active": …

我正在尝试创建这样的通用控件

动态控制

import { Component, Input } from '@angular/core';

@Component({
  selector: 'ngo-button',
  template: `<button [ngClass]=class type={{type}}>{{message}}</button>`,
  styles: [`.one{border:solid 2px yellow} .two{background-color:pink} .three{
  background-color: blue;
}`]
})
export class HelloComponent  {
   @Input() type: string = 'button';
  @Input() class: string = 'one three';
  @Input() message: string = 'submit';
}

main-component.html

<ngo-button [class]='btn two' (click)='somefunc()'></ngo-button>

现在我想将两个类传递给按钮，但是当我试图以这种方式传递它时，我得到了错误

[class] ='btn two'

我想，我们不允许在输入参数中添加空间，还有另一种实现方法吗？

这是stackblitz链接