标签: angular5

以下不会将数组输出到控制台。范围不正确？？？

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Broker } from './broker';

@Injectable()
export class BrokerSurveyService {

  brokers: Broker[] = [];

  constructor(private http: HttpClient) { 
    this.getBrokers().subscribe((brokers) => { 
      this.brokers = brokers;
    });
    console.log(this.brokers); # Does NOT output to console
  }

  getBrokers() {
    return this.http.get<Broker[]>('http://www.example.com/brokers.json');
  }

}

这会将数组输出到控制台，因为它在分配后立即发送到控制台。是this范围不同？我很困惑为什么。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Broker } from './broker';

@Injectable()
export class BrokerSurveyService …

我正在创建一个新Angular 5网站，mat-sidenav但我遇到了问题。

我的mat-sidenav-container位于我的position: fixed主菜单下，这很好，但如果页面有垂直滚动，如果mat-sidenav显示它也会滚动。

我所追求的是停止后面的内容滚动，如果mat-sidenav显示，但我不知道CSS这样做，因为我已经尝试了所有position

HTML

<mat-toolbar>
    <mat-icon class="subMenuIcon" (click)="sidenav.toggle()" title="Click to open the sub-menu.">reorder</mat-icon>
    <img src="./assets/images/Crest.jpg">LEARNING SITE
    <div class="emptySpace"></div>        
    <mat-icon class="loggedInIcon">person</mat-icon>
    <span style="font-size: 15px">USERNAME</span>
</mat-toolbar>
<mat-sidenav-container>
    <mat-sidenav #sidenav mode="over" opened="false">
        <div class="closeButton">
            <mat-icon (click)="sidenav.toggle()" title="Click to close the sub-menu.">clear</mat-icon>
        </div>
        <a (click)="sidenav.toggle()" routerLink="/">
            <mat-icon>person</mat-icon>
            Dashboard
        </a>
        <a (click)="sidenav.toggle()" routerLink="search">
            <mat-icon>search</mat-icon>
            Search
        </a>
    </mat-sidenav>
</mat-sidenav-container>
<router-outlet></router-outlet>

CSS

mat-sidenav {
    background-color: gray;
    margin-top: 64px;
    color: #ffffff; …

我正在尝试创建一个表单来提交详细信息，但是当我订阅该服务时，订阅完成了两次。第一个是空数据，第二个是实际数据。

组件.ts

addBook() {
    this.errorMessage = null;
    this.fireService.getBook(this.bookDetails.isbn).subscribe(data => {
      console.log('subscribe called');
      if (null != data) {
        this.dbox.open(DialogBoxComponent, {
          data: { title: 'Error', content: 'Book is already present in Library. Select Edit book to modify the details', button: false }
        });
        this.errorMessage = 'Book is already present in Library. Select Edit book to modify the details';
      } else {
        this.fireService.addBook(this.bookDetails);
        this.dbox.open(DialogBoxComponent, {
          data: { title: 'Success', content: 'Book has been Added to Database', button: false }
        });
        this.router.navigateByUrl('/add-book');
      }
    }); …

I'm currently attempting to set a Cookie header with the following HTTPInterceptor:

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private cookieService: CookieService ) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        'Cookie': 'session=' + this.cookieService.get('session'),
        'withCredentials': 'true',
      }
    });
    return next.handle(request);
  }

}

When attempting to set the Cookie I get the following error:

Refused to set unsafe header "Cookie"

I'm making the request to a local Flask API.

I have attempted to manually set …

我的代码中有一个来自第三方库的 angular-5 下拉组件，这个组件有自己的 CSS，由于它的默认行为，我无法更改它的 CSS（这里我试图减少下拉的宽度），我试过了也使用编写另一个 css 类和内联样式，但它不会改变宽度。

HTML 代码，我已经控制了我的代码：（第 3 方下拉组件）

    <test-dropdown id="dropdown" label="Options Array"
              [selectedOption]="dropdownOptions[0]">
           <test-option *ngFor="let option of dropdownOptions"
              [option]="option" [disabled]="option.disabled">{{option.label}}  
           </test-option>
    </test-dropdown>

上面的下拉组件，在浏览器中运行应用程序后看起来像，

    <test-dropdown _ngcontent-c4="" id="dropdown" label="default" ng-reflect-label="default">
  <div class="test-dropdown" ng-reflect-ng-class="[object Object]">
    <label>DropDown</label>
    <div>
      <button class="select">Select...</button>
      <div class="dropdown">
        <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
  }-->
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option One
          </button>
        </test-option>
        <test-option _ngcontent-c4="" class="dropdown-btn-vp option ng-star-inserted" style="min-width: 120px"
                     ng-reflect-option="[object Object]">
          <button class="option">
            Option Two
          </button>
        </test-option>
        <!--bindings={}-->
      </div>
    </div> …

嗨，我在尝试让 httpClient 补丁请求发送内容类型为“multipart/form-data”的 FormData 时遇到问题。

我已经指定了标题，如图所示：

  private httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'multipart/form-data', 'Cache-Control': 'no-cache', 'Pragma': 'no-cache'
    })
  };

我执行以下操作以保存到 nodejs 服务器：

const formData: FormData = new FormData();
formData.append('materialFile', 'something');
return this.httpClient.patch<any>(this.apiUrl  + loan.id, formData, this.httpOptions);

在我的 Nodejs/Express 服务器上，我执行以下操作：

const Multer  = require('multer');

router.patch('/:id', Multer().fields([{ name: "materialFile", maxCount: 1 }]), (req, res, next) => {
  console.log(req.files['materialFile']);
});

当我检查浏览器上的请求标头时，我看到内容类型是 application/json。

有谁知道为什么？

我在浏览器中处理后退按钮有问题。我有一个自定义模态（只有 html/css，没有引导程序），我想在用户单击后退按钮时显示这个模态。如果用户选择是，浏览器将直接到上一页。当用户选择否时，模态将消失而不是直接到另一个。我尝试使用 candeactive 和 PlatformLocation，但似乎不起作用。单击时我无法将浏览器直接停止到上一页。对此有任何解决方案吗？如果是，请给我一个例子。感谢大家的帮助！

这是我的代码：

文章.component.html

<div class="editor-page">
  <div class="container">
    <div class="row">
      <div class="col-md-8 offset-md-2">
        <form [formGroup]="articleForm" (ngSubmit)="handleSubmit()">
          <div class="form-group">
            <input type="text" name="title" class="form-control" placeholder="Article Title" formControlName="title">
          </div>
          <div class="form-group">
            <input type="text" name="body" class="form-control" placeholder="What's this article about?" formControlName="body">
          </div>
          <div class="form-group">
            <textarea name="description" class="form-control" id="" cols="30" rows="10" placeholder="Write your article (in markdown)" formControlName="description"></textarea>
          </div>
          <div class="form-group">
            <input type="text" name="tagList" class="form-control" placeholder="Enter tags" formControlName="tagList">
          </div>
          <button class="btn btn-md btn-success float-right">Publish Article</button>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="modal" *ngIf="isBackClicked"> …

我正在使用 Angular 5 的材料组件，并且有一个表单控件，它是由服务调用提供支持的自动完成功能。不幸的是，在服务调用完成之前，自动完成不会显示，并且由于我们目前遇到的一些网络延迟问题，大多数用户在服务调用完成之前完成了输入。我想显示某种自动完成正在加载的视觉指示器，但无法弄清楚如何去做。

我们尝试的廉价解决方案是使用工作“加载”填充自动完成菜单，但这需要调整我们的过滤，以便在有人开始输入不以 l 开头的值时它不会立即被压缩。

这是其中一个字段的 HTML 基础知识：

<mat-form-field [hideRequiredMarker]="true">
    <input matInput [(ngModel)]="size" type="text" 
             placeholder="{{'OPTIONS.SIZE' | translate}}"
             [matAutocomplete]="autoSize"
             readonly="{{!model}}"
             (keyup)="filterSizes()"
             matTooltip="{{ 'OPTIONS.MODEL_REQUIRED' | translate }}" 
             [matTooltipDisabled]="model != ''" />

    <mat-autocomplete #autoSize="matAutocomplete">
       <mat-option *ngFor="let completeSize of filteredSizeNames" [value]="completeSize">
          {{completeSize}}
       </mat-option>
    </mat-autocomplete>
</mat-form-field>

服务调用完成后会填充filteredSizeNames 变量。我浏览了材料组件页面，但运气不佳，找到了解决方案。

我正在使用 angular 2 构建一个使用路由的 web 应用程序。因为我是 angular 的新手，所以我曾经使用href这样的属性链接到另一个组件：

<a href="localhost:4200/database/seed/1">link</a>

这是有效的，但这种方法也使组件需要高达 3 秒半的时间来加载！

当我这样做时routerLink：

<a [routerLink]="['/database/seed/',1]">link</a>

加载时间不到半秒。我想知道为什么会这样，两种方法基本上都做同样的事情。他们链接到另一个页面。谁能解释导致加载速度差异的原因？谢谢

如果问题可能太宽泛，我深表歉意，这肯定是因为我是 XMPP 的新手。

我正在开发 Angular6 应用程序并希望在其中集成 Jabber 聊天。我用谷歌搜索了很多，但似乎没有找到任何明确的答案。

显然 strophe.js 看起来很有希望，但我找不到任何关于如何将它集成到 Angular5/6 项目的文档。

任何提示将不胜感激

谢谢