标签: angular5

你们知道如何使用@HostBinding装饰器在组件中批量注入样式声明吗？我在想的是:

@HostBinding('style')
get style(): CSSStyleDeclaration {
  return {
    background: 'red',
    color: 'lime'
  } as CSSStyleDeclaration;
}

在我的理解中,这应该为组件注入背景和颜色样式,但它不...

我可以像这样控制各个样式声明:

@HostBinding('style.background') private background = 'red';

但我想为所有人做这件事,请帮助:P

这是完整的代码:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello world!</h2>
    </div>
  `,
})
export class App {

  // This works
  @HostBinding('style.color') private color = 'lime';

  /* This does not work
  @HostBinding('style')
  get style(): CSSStyleDeclaration {
    return {
      background: 'red'
    } as CSSStyleDeclaration;
  }
  */

  constructor() {}
}

和一个工作的plunker:https://plnkr.co/edit/CVglAPAMIsdQjsqHU4Fb ？ p = preview

我正在尝试实现401响应的catch,并尝试在令牌刷新后基于Angular 4 Interceptor重试请求获取刷新令牌 .我试图实现同样的事情,但我从来没有能够重试该请求,我真的不确定这是否是应用刷新令牌策略的最佳方法.这是我的代码:

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
 public authService;
 refreshTokenInProgress = false;
 tokenRefreshedSource = new Subject();
 tokenRefreshed$ = this.tokenRefreshedSource.asObservable();
 constructor(private router: Router, private injector: Injector) { }
 authenticateRequest(req: HttpRequest<any>) {
 const token = this.authService.getToken();
 if (token != null) {
 return req.clone({
 headers: req.headers.set('Authorization', `Bearer ${token.access_token}`)
 });
 }
 else {
 return null;
 }
 }
 refreshToken() {
 if (this.refreshTokenInProgress) {
 return new Observable(observer => {
 this.tokenRefreshed$.subscribe(() => {
 observer.next();
 observer.complete();
 });
 });
 } else …

在Angle 5应用程序中需要Babel吗？内部使用什么AOT或JIT进行编译？

我在ngForm中有一个材料下拉列表,当我按需要设置此选项时,它旁边显示一个星号*但是如果我没有从下拉列表中选择任何选项,则该表单被视为有效.

<mat-form-field class="col-4 offset-1">
<mat-select placeholder="Some placeholder" [(value)]="data.name" required>
  <mat-option *ngFor="let name of names" [value]="name.value">
    name.viewValue
  </mat-option>
</mat-select>
</mat-form-field>

这与我将材质输入设置为required时会发生的情况不同,如果表单为空,则会使表单无效.

<mat-form-field class="col-4 offset-1">
 <input matInput name="dob" placeholder="Date Of Birth" [(ngModel)]="data.dob" required>
  </mat-form-field>

我更喜欢使用模板驱动的方法来解决这个问题而不是使用ReactiveForms(我找到了一些关于ReactiveForms的解决方案),任何人都可以帮助我吗？

注意:

我发现了一个类似标题的问题,但它使用的是FormGroup(reactiveForms)

我举了一个例子来说明这个stackblitz

我正在使用Angular Material中的MatTable组件来创建动态数据表.

我需要得到一行的当前位置.我可以很容易地获得用户点击的行但我无法知道它在列表中的当前位置(这取决于排序/过滤/分页).

任何的想法？

我试图在拦截器中引发可观察到的错误，然后处理该错误。但是我不能。如果成功为假，我也可以收到成功的订阅。

我尝试在中再次返回一个值next.handle(restReq)。但是我失败了，没有订阅任何东西

restApi这样返回

{
  "success": false,
  "data": {
    "name": "Bad Request",
    "message": "123",
    "code": 0,
    "status": 400,
    "type": "yii\\web\\BadRequestHttpException"
  }
}

验证服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private sessionUrl = '/wechat/session';

  constructor(
    private http: HttpClient
  ) { }

  getSession(): Observable<any> {
    return this.http.post<any>(this.sessionUrl, {});
  }
}

auth.component.ts

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

我有一个带有两个应用程序的Angular CLI项目。这两个应用程序是相同的，但是一个应用程序包含构建中的所有文件，另一个则需要排除模块。

Angular CLI版本：1.7.4 Angular版本：5.2.10

我将两个应用程序添加到angular-cli.json文件中，每个应用程序都有一个单独的ts-config文件。

  "apps": [
    {
      "name": "app",   <---- first app
      "root": "src",
      "outDir": "/wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",       <----first TS config
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "admin",   <---- second app
      "root": "src",
      "outDir": "/wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": …

在Angular 5中，我注意到ng serveVisual Studio Code中的命令具有以下奇怪行为，导致第一次编译与后续编译的结果不同。

• 假设我们有一个简单的TypeScript错误，例如 [ts] Property 'x' does not exist on type 'y'.
• 当我键入ng serve并按Enter键时，控制台将显示TypeScript错误，然后显示消息webpack: Failed to compile。
• 但是，如果忽略此错误，请打开另一个文件，然后直接单击CTRL + S，则会忽略TypeScript错误，并显示以下消息：webpack: Compiled successfully。

这是我一段时间以来注意到的。第一次编译应用程序时，如果出现TypeScript错误，它将失败。但是，在由后续保存触发的编译中，尽管存在这些错误，该应用程序仍可以成功编译。

为什么会这样？有没有解决的办法，或者这是预期的行为？

我试图过滤具有以下结构的许多对象的列表：

{  
"element1":{  
  "code":"12345",
  "location":"Location"
},
"users":[  
  {  
     "id":1,
     "name":"Name 1",
     "surname":"Surname 1",
  },
  {  
     "id":2,
     "name":"Name 2",
     "surname":"Surname 2",
  }
 ]
}

现在，我正在按第一个元素进行过滤，如下所示：

filterList(value) {

    if (value&& value.trim() != '') {
        myList = myList .filter((item) => {
            return (item.element1.location.toLowerCase().indexOf(value.toLowerCase()) > -1);
        })
    }
}

我一直试图通过用户属性（这是对象列表）对其进行过滤，以对其进行过滤，而在姓氏中，我必须更改什么？

我已经定义了一个行为主题:

component.ts

bsub1: BehaviorSubject<Array<any>> = new BehaviorSubject(null);

并在其上调用next():

HTML:

<button (click) = getData()>Data</button>

component.ts:

getData() {
    getSomething(value, bsub1);
}

service.ts

getSomething(value, _observable) {
    //do something

    _observable.next(retun)
    somevariable.map(p => {
        return { "a": value1, "b": value2 }
    });
}

并订阅:

component.ts

 ngOnInit() {
     bsub1.subscribe(list=>{
         console.log("subscribed to bsub1")
     });
 }

但是在调用getSomething()之后,我的代码没有达到订阅状态.它在组件加载时到达那里,但是在调用next()之后它没有订阅.这只发生在IE 11中,而在edge,chrome和firefox中它正在发挥作用.

有人可以解释我这种行为吗？