标签: angular6

我有一个 data.json 文件，如下所示。

[
    {"value":1},
    {"value":2},
    {"value":3},
    {"value":3}
]

& 我正在使用 Http 来获取数据。数据正常传输，但是如果我的服务器关闭了，那么它会抛出错误，我想向用户显示一些自定义消息而不是该错误。下面是我获取数据的函数。

 data: any;

  getData() {
    this.http.get('http://localhost/php/data.json').subscribe((res) => {
      this.data = res;
      console.log(this.data);
    })
  }

  ngOnInit() {
    this.getData();
  }

我正在尝试在我的项目中使用Bpmn-JS。

所以当我尝试创建工作流程时我看到

谁能告诉如何删除它，因为它是在画布中动态出现的......！

提前致谢。

我正在学习 Angular 5+，最近谈到主题/订阅部分，我看到很多教程都想以某种方式使用订阅：

1. 在组件中声明订阅
2. 通过服务的主题或 ngrx/store 在 ngOnInit 中订阅它
3. 在 ngOnDestroy 中取消订阅

但是，我不确定我们是否必须订阅/取消订阅 ngOnInit 和 ngOnDestroy 中组件中的每个订阅。例如，如果我的订阅将通过按钮单击事件进行更新，我应该在组件中订阅哪个计划？

1. 仅 ngOnInit
2. 仅按钮点击事件
3. ngOnInit 和按钮单击事件

为什么我们总是在 ngOnInit 中订阅订阅？ngOnInit 就像页面生命周期中的 Page_Load 一样，因此它只会在第一次被调用一次，如果是这样，每当订阅更新时，ngOnInit 是否会一遍又一遍地被触发？如果是这样，我的组件是否会被一遍又一遍地加载，这在大型应用程序中会导致性能问题？

我正在尝试将我的 woocommerce Rest api 与 Angular 6 连接。

export class RestService {
  _urlwc = 'http://127.0.0.1/wp-json/wc/v2/products'; //woocommerce
  _urlwp = 'http://127.0.0.1/wp-json/wp/v2/posts';    //wordpress

  constructor(private http: HttpClient) { }

  getPosts() {
    return this.http.get(this._urlwp);
  }
  getProducts() {

    let headers = new HttpHeaders();
    headers = headers.append("Authorization", "Basic " + btoa("ck_9c9293adb7d3fb19f60a1dccd0cb5d4a251e9e03:cs_77a221d4655d5fb8fc2a5c85b7259c2364d59a8c"));
    headers = headers.append("Content-Type", "application/x-www-form-urlencoded");
    return this.http.get(this._urlwc, { headers: headers });

  }
}

即使没有授权，只有 WordPress get 方法也能正常工作，但 Woocommerce 给了我未经授权的 401 代码！[我已经创建了消费者密钥和秘密]

然后我尝试使用 Postman 进行不同的身份验证，例如

• 无授权
• 基本认证
• OAuth 2.0

OAuth 1.0 与邮递员配合得很好。
我如何使用 woocommerce api 实现身份验证 Angular 6？ …

这是请求（已更新）：

this._service.getPeople().subscribe((response) => {
 this.people = response;
});

这是方法：

filterIt(arr: any, searchKey: any) {
        return arr.filter((obj: any) => {
          return Object.keys(obj).some((key) => {
            return obj[key].includes(searchKey);
          });
        });
      }

我想要的结果是过滤表行，但我得到的是：

类型错误：obj[key].includes 不是函数

必须知道的是，这段代码与硬编码的对象数组完美配合，但是当我使用服务 (http.get) 从后端获取数据时，该服务工作正常并返回带有数据的 JSON，但我仍然得到错误。任何帮助，将不胜感激！

我正在使用 Typescript 2.7.2、Angular 6 和 MDBootstrap 6.2.2(Angular)。

对于默认视图封装值为 的组件，请考虑以下组件级样式ViewEncapsulation.Emulated：

:host h2 {
    color: red;
}

这将编译成以下 CSS：

[_nghost-c0] h2[_ngcontent-c0] {
    color: red;
}

:host但是，如果您在规则中省略选择器，则生成的 CSS 将如下所示：

h2[_ngcontent-c0] {
    color: red;
}

这两个 CSS 规则之间有行为差异吗？我理解使用:host 自身来设置顶级组件元素的样式，但是一旦嵌套到子元素，这不是:host毫无意义吗？

我想以这样的方式实现路由：如果您单击下拉列表，它就会转到该特定页面。但我希望在路由到其他组件时保留标头。它会转到特定的 url，但不显示内容。我尝试过子路由，但它似乎不起作用。

上图是下拉菜单的样子。它有以下网址

本地主机:4200/正文

当我单击用户管理时，我希望它转到

本地主机：4200/body/用户

虽然它转到特定的网址，但它没有显示下面的任何内容，如图所示。

这些是我的代码（app.routing.ts 和 .html）

我已将 multiTemplateDataRows 添加到我的 <mat-table multiTemplateDataRows>

并有以下几行：

<mat-header-row *matHeaderRowDef="data.displayedColumns"></mat-header-row>
<tr mat-row *matRowDef="let row; columns: data.displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: ['detail'];"></tr>

但我仍然收到错误“只有一个默认行没有 when 谓词函数。”

在官方 ng 书（第 73 页）中，我读到可以通过两种不同的方式指示 Angular 6 组件标签。官方手册中的示例：

1. <inventory-app-root></inventory-app-root>

2. <div inventory-app-root></div>

但在我的 Angular 应用程序中，只有第一种方法有效。

<app-test-component></app-test-component>

（工作）

<div app-test-component></div>

（不起作用）

为什么是这样？

我正在尝试进行套接字连接。但我收到上述错误。我正在尝试使用不同的端点来实现https://tutorialedge.net/typescript/angular/angular-websockets-tutorial/ 。

套接字服务.ts

import { Injectable } from '@angular/core';
import * as Rx from 'rxjs/Rx';

@Injectable({
providedIn: 'root'
})
export class SocketService {

constructor() { }

private subject: Rx.Subject<MessageEvent>;

public connect(url): Rx.Subject<MessageEvent> {
if (!this.subject) {
  this.subject = this.create(url);
  console.log("Successfully connected: " + url);
  } 
  return this.subject;
  }

  private create(url): Rx.Subject<MessageEvent> {
  let ws = new WebSocket(url);

  let observable = Rx.Observable.create(
  (obs: Rx.Observer<MessageEvent>) => {
    ws.onmessage = obs.next.bind(obs);
    ws.onerror = obs.error.bind(obs);
    ws.onclose = obs.complete.bind(obs);
    return ws.close.bind(ws);
   })
 let observer …