标签: angular7

我定义了这个 MatDatePicker：

 <input #creatoDal matInput [matDatepicker]="creatoDal"
                            (focus)="creatoDal.open()" readonly>
                        <mat-datepicker-toggle matSuffix [for]="creatoDal"></mat-datepicker-toggle>
                        <mat-datepicker #creatoDal></mat-datepicker>

在我看来，我已经正确绑定了引用，但是当单击日期选择器时，它不会打开，并且会出现以下错误：

错误：尝试打开没有关联输入的 MatDatepicker。在 MatDatepicker.push../node_modules/@angular/material/esm5/datepicker.es5.js.MatDatepicker.open

我正在尝试为令牌过期时失败的请求实现拦截器。我尝试了多种方法但仍然没有成功。

我已经参考了下面的 URL 并阅读了多个博客。每个人都建议切换地图方法，但不与我合作。 Angular 4拦截器在令牌刷新后重试请求

我尝试将所有请求收集到cachedRequests中：Array> = []; 但不知道如何使用它来重新触发失败的请求。

成功刷新令牌后， this.next.handle(request) 不会被召回。不过我可以看到更新后的请求对象。

有人可以指出在角度7中用
“rxjs”：“〜6.3.3”，“rxjs-compat”：“^ 6.5.2”引用的地方，以实现拦截器。

下面是对我有用但仅获得令牌响应的代码

``````````
    handleError(request: HttpRequest<any>, next: HttpHandler, err) {
            if (err instanceof HttpErrorResponse) {
                if (err.status === 401) {
                    this.service.getNewToken().pipe(filter(token => token != null),
                        take(1),
                        switchMap((token: any) => {
                            console.log('token', token);
                            if (token && token.access_token && token.refresh_token) {
                                sessionStorage.setItem('accessToken', token.access_token);
                                sessionStorage.setItem('refreshToken', token.refresh_token);
                            }
                            request = this.addHeader(request);
                            request.headers.getAll('Authorization');
                            return next.handle(request);
                        })).subscribe(results => this.subject.next(results));

                }
            }
        }

`````````

更新2：尝试多种方法后我发现

1. 返回 next.handle(请求); <-- 这根本就没有被调用
2. 返回 next.handle(request).subscribe(); <-- 这被调用但不更新对请求的组件的响应。 …

网格使用 绑定到服务async。在多个情况下使用相同的服务（模式 -state然后进行更改），我发现有时第二个请求首先完成，第一个请求随后完成。然后网格显示第一个响应的数据，而我需要它显示最后一个响应的数据。因此，我想使用exhausMap以便在触发新请求之前等待响应完成。

请在下面找到我的代码。

服务.ts

public query(token: string, tableName: string, state: any): void {
    console.log("state in query", state);
    this.fetch(token, tableName, state)
        .subscribe((x: any) => {
            console.log("response data", this.data);
            super.next(x);
            this.isLoading = false;
            this.mediatorService.sendMessage("APsRefreshed");
        },
            (err: any) => {
                console.log("err", err);
                this.isLoading = false;
            }
        );
}

public fetch(token: string, tableName: string, state: any): Observable<any> {
    let queryStr = `${toODataString(state)}&$count=true`;
    queryStr = queryStr.replace(/('[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}')/ig, function (x) {
        return x.substring(1, x.length - 1);
    });
    queryStr = queryStr.replace(/substringof\((.+),(.*?)\)/, …

我正在尝试使用dotnet核心创建一个Angular 7 SSR来托管它，默认模板使用angular 5，并且MS有文档来使SSR在其上运行（效果很好），我尝试通过命令行将其升级到angular 7并开始一个新的角度项目并实施SSR之后，但我总是遇到相同的问题，ng build和ng build：SSR在命令行上都可以正常工作，但是当我从VS运行它时，它超时了（我认为引发错误后，与该问题无关）：

The thread 0x6608 has exited with code 0 (0x0).
The thread 0x1134 has exited with code 0 (0x0).
The thread 0x54bc has exited with code 0 (0x0).

在此之后（https://github.com/aspnet/Templating/issues/593），我对NG5 SSR（https://go.microsoft.com/fwlink/?linkid=864501）所做的更改是：

startup.cs

options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";

至

options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js";

再次将SSR项目添加到angular.json

 "ssr": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "optimization": false,
              "outputHashing": "media", …

我正在使用ng-select v2和angular 7.

我在下面的return语句中收到错误

getHospital(term: string = null): Observable<Hospitals[]> {
    let items = this.getHospitals1();
    if (term) {
      items = items.pipe(
        filter((x,i) => x[i].name.toLocaleLowerCase().indexOf(term.toLocaleLowerCase()) > -1)
      )
    }
    return of(items).pipe(delay(500));
  }

3个错误说:

• 类型'Observable>'不能分配给'Observable'类型.
• 输入'Hospitals [] | Observable'不能分配给'Hospitals []'.
• 类型'Observable'不能分配给'Hospitals []'.

这是我的getHospitals1函数

getHospitals1() : Observable<Hospitals[]>{
    return this.http.get<Hospitals[]>('https://my-json-server.typicode.com/monsterbrain/FakeJsonServer/hospitals')
   }

export interface Hospitals {
  id: string;
  name: string;
  address: string;
}

应该改变什么来解决这个问题？

我正在尝试HttpClient在Angular 7中使用JSON .代码工作正常,但我正在尝试实现注释代码并停止使用CONST IMAGES并直接从api获取此数据,我还不能这样做.

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

@Injectable()
export class ImageService {

  // public _url: string = "https://jsonplaceholder.typicode.com/photos";
  constructor(
    // public http: HttpClient
  ) {}

  theImages = [];
  // IMAGES = [];
  getImages(){
    // this.IMAGES = this.http.get(this._url);
   return this.theImages = IMAGES.slice(0);
 }
  getImage(id: number){
    // this.IMAGES = this.http.get(this._url);
    return IMAGES.slice(0).find(image => image.id == id);
  }

}
const IMAGES = [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus …

我有两个模块：FrontUI和AdminUI。FrontUI是根模块，而AdminUI是延迟加载的。

在“管理”部分中，我需要加载一些与FrontUI不同且仅特定于“管理”部分的.css文件。我尝试了以下-

1. 我在angular.json中添加了这些.css文件路径，如下所示，并且可以正常工作。但这会在启动过程中捆绑这些文件，这是不合适的

"styles": [
              "node_modules/@xyzPlugIn/base.css",
              "node_modules/@xyzPlugIn/theme.css"
            ],

2. 我在component.ts文件中添加了.css文件路径，如下所示，但这并未呈现css

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['../node_modules/@xyzPlugIn/base.css',
              '../node_modules/@xyzPlugIn/theme.css']
})

由于客户端/用户不同，能否为两个单独的模块加载不同的样式？在生产环境中，可以将这些文件捆绑在一起吗？

PS：我提到的项目结构简短易懂。

尝试从特定组件导航到其他路线时，出现一个奇怪的错误。如果我导航到其他组件的不同路线，则不会看到此错误。我附上错误的屏幕截图

我已经搜索了这个问题，似乎是RxJS或空路由的问题。但是我在空路由中添加了pathMatch：'full'，我的RxJS版本是6.3.3。任何想法或任何解决此问题的人都可以提供很大帮助。

我的导航栏图标如下，并且在悬停时我想显示不同的图标，这意味着由于许可证问题，无法使用蓝色引导图标中的相同图标。因此，将鼠标悬停以将图标更改为Alerts_torqHover.png时可以做什么

<div class="topbaricons">
  <img src="assets/icons/alerts_torq.png">
  <a><img src="assets/icons/alerts_torqHover.png"> </a>
</div>

以前，我曾使用Boolean属性来禁用复选框。

这是我到目前为止尝试过的。

app.component.ts
---------------
 ReadOnly: boolean;

  ngOnInit() {
    this.ReadOnly = true;
  }

app.component.htmt
------------------
<input type="checkbox" [disabled]="ReadOnly">

{ 
         "id":1,
         "category":"cc",
         "sortOrder":"1",
         "active":"Y",
         "Products":[ 
            { 
               "id":100,
               "backEndName":"DDA",
               "sortOrder":"1",
               "active":"N"
            }
         ]
      }

现在我需要使用活动条件使字段禁用。我该怎么做？