小编Vug*_*yev的帖子

将Promise转换为RxJs Observable

有人可以帮助将此承诺转换为RxJs可观察对象吗?我想从本地存储中获取令牌,如果出现错误,应该使用订阅了observable的观察者来捕获它.以下是Promise的现有解决方案:

  getToken(): Promise<any> {
    return new Promise<any>((resolve, reject) => {
      resolve(JSON.parse(localStorage.getItem('currentUser')).token);
      reject();
    });
  }
Run Code Online (Sandbox Code Playgroud)

和订户是:

 this.authService.getToken().then(token => {
      this.token = token;
    }).catch(() => console.log('Error! cannot get token'));
Run Code Online (Sandbox Code Playgroud)

我尝试使用以下方法将其转换为Observable:

 getToken2(): Rx.Observable<number> {
    return Rx.Observable.create(obs => {
      obs.next(JSON.parse(localStorage.getItem('currentUser')).token);
       obs.error('Error! cannot get token');
    });
  }
Run Code Online (Sandbox Code Playgroud)

  this.authService.getToken2()
  .subscribe((token) => console.log(token), (er) => console.log(er));
Run Code Online (Sandbox Code Playgroud)

但问题是当从localstorage获取令牌时发生错误时,RxJs observable不会通过obs.next()捕获它.就好像它已成功解析.Promise通过拒绝方法成功捕获它.可以有人给出一个想法怎么了?谢谢

rxjs rxjs5 angular

8
推荐指数
1
解决办法
4600
查看次数

RxJS forkJoin 未完成

当我订阅 getAllSubModules forkJoin 时,会无错误地执行所有这些 observable 但没有完成。我知道 forkJoin 仅在其所有 observables 完成后才完成,但作为证据,我在控制台中看到 '-----' 3 次,确认一切都成功,因此其所有 observables 已完成。

 getSubmodules(id): Observable<any> {
    return this.authService.getToken()
      .flatMap((token) => this.http.get(`${this.URL}/ROS/applications/modules/${id}/subModules?token=${token}`))
      .map((res: any) => res.data.map((subModule) => this.mapSubModules(subModule)));
  }
  getAllSubmodules(): Observable<any> {
    const tasks = [];
    this.modules.forEach((module: AppModule) => {
      const obs = this.getSubmodules(module.id).map((subModules) => {
        this.allSubModules[module.id] = subModules;
        console.log('--------------------');
      });
      tasks.push(obs);
    });
    return Observable.forkJoin(...tasks).retry(2);
  }
  mapSubModules(moduleData) {
    if (moduleData.id) {
      const subModule = <SubModule> {
        id: moduleData.id,
        parentId: moduleData.parentId,
        typeId: moduleData.typeId,
        name: moduleData.name.az,
        active: true
      };
      return subModule; …
Run Code Online (Sandbox Code Playgroud)

rxjs rxjs5 angular

5
推荐指数
1
解决办法
4050
查看次数

:root CSS 变量未设置为元素样式

请查看Stackblitz或下面的代码
存在以下问题:来自 :root 的变量未设置为元素。但是当我重命名:root => .component时。它按预期工作。显示该框。
为什么 :root 变量没有设置?它们不是全局性的还是特异性问题?
提前致谢。

社会保障体系:

:host {
  display: block;
}
:root {
  --profile-picture-size-w: 9rem;
  --profile-picture-size-h: 9rem;
  --profile-picture-border: 1px solid #1e96a9;
  --profile-box-backgound-size: cover;
  --profile-box-p: 20px 0;
  --article-dateInfo: 3px;
}

.component{
  height: 500px;
  background: lightgray;
  #main_content {
    .scrollbarContent{
      article#profile {
        .profileBox {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: var(--profile-box-p);

          .profilePicture {
            position: relative;
            width: var(--profile-picture-size-w);
            height: var(--profile-picture-size-h);
            background: cyan;
          }
        }
 }
    }

  }

}

@media all and (min-width: …
Run Code Online (Sandbox Code Playgroud)

html css sass css-variables angular

5
推荐指数
1
解决办法
5709
查看次数

Ag 网格,防止表格缩放到全宽

我有一个表格,即使其内容较少,也可以缩放到所有可用宽度。
演示:“ https://plnkr.co/edit/6L8bTAwkEV6R6Be4M1Qm?p=preview
尝试通过给父级 awidth和 ag-grid来解决它max-width,但如您所见,它没有效果。有人有什么想法吗?
提前致谢。

html css ag-grid angular

2
推荐指数
1
解决办法
6659
查看次数

Angular ng build不会产生dist文件夹

我很沮丧,因为我运行了构建,但它不会在项目文件夹中生成dist文件夹.我对其他项目没有任何问题.奇怪的是,编译器不会给出任何错误.有人可以检查我的项目并告诉原因吗? https://github.com/vugar005/Report 亲切的问候

angular-cli angular

1
推荐指数
1
解决办法
3301
查看次数

安装软件包时 NPM 安装挂起

我目前正在使用一个项目。它工作正常,但是当我将项目文件(除了node_modules)删除到另一个文件夹或 GitHub 时出现问题,通过 npm 重新安装包不成功。它总是挂在

extract:rxjs: sill extract big.js@3.1.3

我试过npm cache verify没有运气。

这是 packages.json

{
  "name": "esas",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/cdk": "^2.0.0-beta.10",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.10",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3",
    "angular2-loaders-css": "^1.0.9",
    "angular2-perfect-scrollbar": "^2.0.6",
    "bootstrap": "^4.0.0-beta",
    "core-js": …
Run Code Online (Sandbox Code Playgroud)

npm rxjs npm-install npm-scripts angular

1
推荐指数
1
解决办法
8847
查看次数

Angular 5材质表中的溢出x-auto

我需要制作响应表,甚至可以在移动视图中呈现而不会分解.为了使它工作,我使用下面的标准HTML表链接

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

看看样本:https://www.w3schools.com/howto/howto_css_table_responsive.asp

它工作得很好但最近切换到Angular 5表,它没有响应式设计的API.如何将overflow-x auto添加到角表?样本角5表:

https://stackblitz.com/edit/angular-material-table-data-source-ibmgv2 提前致谢

html css angular-material angular-material2 angular

1
推荐指数
1
解决办法
5778
查看次数

@Media 打印样式不适用

Stackblitz: https: //stackblitz.com/edit/angular-xvdy1q
我想打印特定的div.

<div id="forPrint" (click)="onPrint('23')">
  <div id="printable">
    <div class="box">

    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

JavaScript 代码:

onPrint(url) {
  this.mode = 'print';
  const mywindow = window.open('', 'PRINT', 'height=400,width=600');

  mywindow.document.write(`<html><head><title>${document.title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(`<h1> www.${url}</h1>`);
  mywindow.document.write(document.getElementById('forPrint').innerHTML);
  mywindow.document.write('</body></html>');
  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}
Run Code Online (Sandbox Code Playgroud)

风格:

@media print {
  html,
  body {
    height: 100% !important;
    width: 100%!important;
    h1 {
      color: #1c7430;
    }
  }
  #printable {
    display: flex!important;
    justify-content: center!important;
    align-items: …
Run Code Online (Sandbox Code Playgroud)

html javascript css sass

1
推荐指数
1
解决办法
1459
查看次数