小编Val*_*Rob的帖子

我在尝试创建将keyup事件转换为可观察流时遇到问题.

我正在关注Ng-book版本6.我陷入了一个在您输入时搜索YouTube视频的示例.当搜索返回时,我们将显示视频缩略图结果列表,以及每个视频的说明和链接.

所以为此,我们使用了一个observable.fromEvent:https://github.com/NiLinli/ng-book2-angular-6-r68-code-samples/blob/master/http/src/app/you-tube-search /search-box.component.ts

在RxJS 5中,它提供了一种使用Rx.Observable.fromEvent侦听元素上的事件的方法.

ngOnInit(): void {
// convert the `keyup` event into an observable stream
Observable.fromEvent(this.el.nativeElement, 'keyup')

但是我收到了这个错误:

src/app/search-box/search-box.component.ts(42,13)中的错误:错误TS2339:类型'typeof Observable'上不存在属性'fromEvent'.

我RxJS 6 Observable和fromEvent的导入是这样的:

import { Observable, fromEvent } from 'rxjs';

这是我在Angular 6中的RxJs5版本的代码:(它不起作用)

Observable.fromEvent(this.el.nativeElement, 'keyup')
.map((e: any) => e.target.value) // extract the value of the input 
.filter((text: string) => text.length > 1) // filter out if empty 
.debounceTime(250) // only once every 250ms 
.do(() => this.loading.emit(true)) // enable loading
      // search, discarding old …

我对如何在Angular 5中为简单的Get请求创建一个好标头感到困惑.

这是我在Angular中需要做的事情:

这是我到目前为止:

  getUserList(): Observable<UserList[]> {
    const headers = new Headers();
    let tokenParse = JSON.parse(this.token)             
    headers.append('Authorization', `Bearer ${tokenParse}`);
    const opts = new RequestOptions({ headers: headers });  
    console.log(JSON.stringify(opts));
    const users = this.http.get<UserList[]>(this.mainUrl, opts)
    return users
            .catch(this.handleError.handleError);         
  }

这是我的console.log中的响应:

{"method":null,"headers":{"Authorization":["Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYwODZlM2FiYTk0ZjVhMjVmNDhiNzlkYmI2YWUwOWY4YzE2MTUyMzg2N2I5MDZiY2MzNWQyNWJiYTZmYTE4YjEwZjA1MjZiNThkZjE2Y2FjIn0.eyJhdWQiOiJmMDExY2M1OC00MGNlLTQzYTktOGY3MS04NDI0OTRlM2E5OTciLCJqdGkiOiJmMDg2ZTNhYmE5NGY1YTI1ZjQ4Yjc5ZGJiNmFlMDlmOGMxNjE1MjM4NjdiOTA2YmNjMzVkMjViYmE2ZmExOGIxMGYwNTI2YjU4ZGYxNmNhYyIsImlhdCI6MTUyMzU1MTQ0NSwibmJmIjoxNTIzNTUxNDQ1LCJleHAiOjE1MjM1NTQ0NDUsInN1YiI6IjIiLCJzY29wZXMiOlsiYXV0aGVudGljYXRlZCIsImFuZ3VkcnUiXX0.E-WdQTl7nPDW0gj0rohfql-QgnAinzvDxPR-pySMrG07XFY9tA6Ex7IL23pDBmKDmQO8RcZKa0L5r6SRQq9_iqzMWzn5Zxp94J9TJrpZ2KGMoLR_FbK_tpC5G5q5vUnCe3q34sH7cPdT_2cI704OWWaYmIUKKpXWUIG0PJw_uKSJ_uOifPv59RZGQkoaQ9gPywDKe-uamm1Faug-Kk2YnFMoEJq7ou19zyxgdpX80ZTPUae67uB0PGLRuvxfGaqVsJ8k0NunAY3-pyUnBwR_3eeuOxf4TyfW2aiOJ9kuPgsfV4Z1JD7nMpNtTHMJaXEyNkBW8RlYHD1pj4dkdnsDmw"]},"body":null,"url":null,"withCredentials":null,"responseType":null}

它看起来很漂亮.但是给了我这个错误

GET http://druang.dd:8080/user-list？_format = json 403(Forbidden)

还有另一条线索可以解决这个谜团.在Sublime文本中,如果我把鼠标放在opts它上面,请说:

错误在src/app/services/userlist.service.ts(33,59)中:错误TS2345:类型'RequestOptions'的参数不能分配给类型'{headers？:HttpHeaders | {[header:string]:string | 串[]; }; 观察？:"身体"; params？:Ht ......'.属性"标题"的类型不兼容.类型'标题'不能分配给'HttpHeaders |类型 {[header:string]:string | 串[]; }".类型'标题'不能分配给'{[header:string]:string | 串[]; }"."标题"类型中缺少索引签名.

任何的想法？？以下是完整的Git repo 谢谢你的帮助!

我在Angular 5.

第一: npm install @auth0/angular-jwt --save

然后我导入它: import { JwtHelperService } from '@auth0/angular-jwt';

这是我的身份验证服务:

import { JwtHelperService } from '@auth0/angular-jwt';

@Injectable()
export class AuthService {

  constructor(public jwtHelper: JwtHelperService) { }

  public isAuthenticated(): boolean {
    console.log (localStorage['token']);
    const token = localStorage.getItem('token');
    // Check wheter the token is expired and return true or false
    return !this.jwtHelper.isTokenExpired(token);
  }
}

这是我的警卫服务

export class GuardService implements CanActivate {

  constructor(public auth: AuthService, public router: Router) {}

  canActivate(): boolean {
    if (!this.auth.isAuthenticated()){
        console.log ('bye');
        this.router.navigate(['/login']);
        return …

我有一个邮递员的问题...

一方面，我可以使用表单数据中的正文发出此请求。

但是，当我尝试使用 raw(json) 中的正文发送相同的请求时，我得到了这个：

我正在尝试通过 Angular 5 将数据发送到 Drupal 8 后端。

谢谢！

首先，工具提示适用于所有方向，顶部、底部和左侧。但对于右边是行不通的。

所以我认为这可能是 CSS 或 HTML 结构的问题。（但是工具提示处于绝对位置，所以我不知道为什么会发生这种情况。）

超文本标记语言

<li class="">
    <div class="hover-highlight ml-2">
        <a class="" href="#">
            <i data-toggle="tooltip"  title="Dashboard" class="icon-meter"></i>
            <span>Dasboard</span>
        </a>
    </div>
</li>

在javascript中我这样做：

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        placement: 'right'
    });
});

就像我说的，对于任何其他位置，它都工作得很好。但对于右派来说，它破裂了！

事实上，我不知道为什么，但它是用左边的属性渲染的：

<div class="tooltip fade show bs-tooltip-left" role="tooltip" id="tooltip558151" style="position: absolute; transform: translate3d(125px, 207px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left">
    <div class="arrow" style="top: 8px;" />
    <div class="tooltip-inner">Dashboard</div>
</div>

问题

好吧，我发现问题了。看起来像自动引导程序根据父 div 推送您的文本。例如，如果您的工具提示位于窗口的右侧，则不能强制将其放置在右侧。

我不知道如何解决这个问题。

代码

请检查此处的代码：

这是我的 package.json 配置：

"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },        
    "moduleNameMapper": {
      "\\.(pdf|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
    }
  },

我在组件内部需要这个图像：

const errorImage = require('../../../assets/images/load_error.png');

这是试图呈现这个：

return (
            <Image
                source={ this.state.source }
                onError={ this._handleError } 
                resizeMode={resizeMode}
                style={[this.props.style, {height: this.state.height, width: this.state.width}]}
            />
        );

处理state.source错误后，将返回所需的错误图像。它在浏览器上完美运行，没有警告或错误。但我在用笑话进行测试时遇到了一些麻烦。

但由于某种原因，它找不到 load_error.png 图像。这是我的文件夹结构：

        ___mocks___
        --> fileMocks.js
        --> load_error.png
        __test__
        --> componentes
        --> --> imageComponent.test.js
        components
        --> imageComponent.js

无论我做什么，错误图像都会变空。

这是我的测试：

const props = {
    author: 'Random Author',
    isSent: true,
    data:{origin:1},
    attachments:{
        4 : {
            type: 2, //file, …

Angular 4. Github来源

我有一个由Web服务填充的菜单.Web服务位于taskService中,但现在不是必需的.

ngOnInit() {
    this.getTasks();
    }
    getTasks(): void {
        this.taskService.getTasks()
            .subscribe(Tasks => this.tasks = Tasks);
    } 

当您单击某个任务时,它会加载一个页面,一个不同的组件,表单已准备好更新数据.它也是由Web服务制作的,工作正常.问题是更新任务后,它没有反映在任务菜单中

我正在导入这个:

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

并将其添加到构造函数:

private cdRef: ChangeDetectorRef

在使用save()函数更新数据之后,这是我对detectChanges()函数的最佳方法

  this.taskService.updateTask(task, id)
          .subscribe(
              this.Ref.detach();
              setInterval(() => {
                this.Ref.detectChanges();
              }, 5000);
      );

这是从菜单中打印任务的html:

   <li *ngFor="let task of tasks" class="d-inline-block col-md-12">
        <a routerLink="/task/{{task.id}}" > {{task.title}}</a>
        <!-- <span class="close big"></span> -->
        <button class="close big" title="delete task"
        (click)="delete(task)">x</button>
    </li>

这是更新任务的表单

<form (ngSubmit)="save(taskName.value, taskBody.value)" #taskForm="ngForm" class="example-form">
  <mat-form-field class="example-full-width">
    <label>Task …

我有：

const file = formData.get('documents[]')

文件是什么类型？

const file: FormDataEntryValue | null

我需要访问file?.name.

我得到：

类型“FormDataEntryValue”上不存在属性“名称”。