小编Joe*_*len的帖子

HttpHeaders和lazyupdate Angular 4和Karma

我有HttpHeaders(角度4.3.0)和Karma的问题.我编写了一些测试,当我使用npm test命令运行它们时,http查询未经授权,因为未设置令牌(X-Auth-Token).当我在浏览器中使用控制台运行相同的部件时,X-Auth-Token已设置好,一切正常.

我能看到的唯一区别是在HttpHeaders对象中,恰好在lazyUpdate中.

没有测试模式

在此输入图像描述

有业力

在此输入图像描述

代码 :

category.service.spec.ts

    describe('Service : Category', () => {

  // setup
  beforeEach(() => TestBed.configureTestingModule({
      imports: [ HttpClientModule, LocalStorageModule.withConfig(localStorageConfig), TranslateModule.forRoot({
        loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
      })],
      providers: [CategoryService, LoaderService, LocalStorageService
      ]
    }));


    it('should list the categories', () => {

        let categoryService = TestBed.get(CategoryService);

        categoryService.apiRoutes = ApiCategoryRoutes;
        categoryService.modelName = "category";

        let actualCategories = [];

        // categoryService expends APIResolverService
        let observable = categoryService.find(); 

        observable.subscribe(data => {

            actualCategories = data;
        });

        console.log("actualCategories");
        console.log(actualCategories);

    });

 });
Run Code Online (Sandbox Code Playgroud)

apiResolver.service.ts(categoryService扩展它,类别服务没有特定代码)

export …
Run Code Online (Sandbox Code Playgroud)

karma-jasmine angular angular4-httpclient

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

通过单击按钮更改选项卡角材料 5

从 Angular 5.X 开始,我就遇到了表单向导 (mat-tab-group) 的问题。通过单击选项卡一切正常,它可以在选项卡之间切换,但我无法使用“下一步”或“上一步”按钮在选项卡之间切换。这是我的代码:

组件.html

<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)" class="mat-tab-group mat-primary"> 

<mat-tab label="Description">
 content...
<mat-card-content class="mat-card-content">
</mat-card-content>
 <mat-card-footer style="margin:0 auto;">
         <div fxLayout="row" fxLayoutAlign="end center">
            <button mat-button type="button" (click)="cancel()" mat-raised-button color="warn">Cancel</button>
            <button color="primary" mat-raised-button (click)="nextStep()" type="button">Next</button>                   
         </div>
     </mat-card-footer>
   </mat-tab>
</mat-tab-group>
Run Code Online (Sandbox Code Playgroud)

组件.ts

    public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
        this.selectedIndex = tabChangeEvent.index;
    }

    public nextStep() {
        this.selectedIndex += 1;
    }

    public previousStep() {
        this.selectedIndex -= 1;
    }
Run Code Online (Sandbox Code Playgroud)

我被 [(selectedIndex)]="selectedIndex" 困住了,因为它不能与 mat-expansion-panel 一起使用(Mat 扩展面板默认打开错误?)。所以我必须删除它,但是,如果我删除它,我的按钮“nextStep”和“previousNext”将不再起作用......

我正在使用:角度材料5.1.1

对此有什么想法吗?

编辑:正如我所说,问题与 selectedIndex 有关...我在显示 mat-expansion-panel 的条件中使用了 selectedIndex。坏主意......所以解决问题,我在组件中创建了一个布尔值来显示或不显示垫扩展面板。如果我在“好”选项卡上,我将布尔值设置为 …

angular-material angular

6
推荐指数
1
解决办法
3万
查看次数

对齐卡片的内容(图像,文本和按钮)

我正在使用列表中的席卡,但对齐方式有问题。

这是我所拥有的:

在此处输入图片说明

这是我想要的:

在此处输入图片说明

代码 :

<div class="margin-top-20" fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="15px grid">
  <div fxFlex="20" fxFlex.md="33" *ngFor="let advert of adverts; let i = index" class="padding-fix">

    <div fxFlexFill fxLayoutAlign="center stretch">
      <mat-card class="ad">
        <div fxLayoutAlign="space-between center">
          <img mat-card-image src="test" alt="test">
        </div>
        <mat-card-title>test</mat-card-title>
        <mat-card-content>
          <p>
            test
          </p>
        </mat-card-content>

        <mat-card-actions align="end">
        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我不明白我可以使图像居中(必要时调整其大小)。

编辑:感谢coreuter的回答,我快要得到我想要的。

在此处输入图片说明

第一块与其他块的高度不同。而且每行的末尾都有一些空白(我希望每行5个元素)。

更新的代码:

<div class="margin-top-20" fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="15px">

                            <mat-card fxFlex="20" (click)="addProduct()" class="mat-card-add-button">
                                <div>
                                    <span style="font-size:32px;text-align:center">+<br />Add product</span>
                                </div>
                            </mat-card>

                            <mat-card fxFlex="20" *ngFor="let product …
Run Code Online (Sandbox Code Playgroud)

css angular-material angular

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

Angular翻译变量替换

我想在翻译中使用变量,但我不知道如何在我的模板中使用它.

在我的HTML模板中:

 <md-input-container class="md-block">
                <md-autocomplete md-no-cache="vm.noCache" 
                                    md-search-text="user.searchUser" 
                                    md-items="userItem in vm.querySearch(user.searchUser)" 
                                    md-item-text="userItem.display"
                                    md-selected-item-change="vm.selectedItemChange(userItem, user)"
                                    md-min-length="0"
                                    required>
                    <md-item-template>
                        <span md-highlight-text="user.searchUser" md-highlight-flags="^i">{{userItem.display}}</span>
                    </md-item-template>
                    <md-not-found>
                        {{ 'user.autocomplete.no_user' | translate:'{ username: user.searchUser }' }}

                    </md-not-found>
                </md-autocomplete>
            </md-input-container>
Run Code Online (Sandbox Code Playgroud)

和我的翻译文件(json):

"user": {
            "autocomplete": {
        "no_user" : "No user has been found ({{username}})",
     }
}
Run Code Online (Sandbox Code Playgroud)

如何使用user.searchUser显示该消息?

非常感谢 !

internationalization angularjs angular-translate

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

如何移动垫扩展指示?

是否可以移动垫子扩展指示器(角度,材料设计)以在标题之前设置它?

关于材料文档https://material.angular.io/components/expansion/overview的信息没有

在此输入图像描述

谢谢 :)

material-design angular

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

错误TS2339:类型“ typeof Observable”上不存在属性“ combineLatest”

当我尝试启动我的angular 6项目时遇到问题。我有这个错误:

“ TSError:?无法编译TypeScript:git.version.ts(34,29):错误TS2339:'typeof Observable'类型上不存在属性'combineLatest'。”

它在Angular 5上运行良好,但我将RxJ更新了(从5升级到6),但现在不起作用。

import { readFileSync, writeFileSync } from 'fs';
import { join } from 'path';
import { Observable, combineLatest } from 'rxjs';


let exec = require('child_process').exec;

let tag = new Observable<string>(s => {
    exec('git describe --tags $(git rev-list --tags --max-count=1)',
        function (error: Error, stdout: Buffer, stderr: Buffer) {
            if (error !== null) {
                console.log('git error: ' + error + stderr);
            }
            s.next(stdout.toString().trim());
            s.complete();
        });
});



let revision = new Observable<string>(s => {
    exec('git rev-parse --short …
Run Code Online (Sandbox Code Playgroud)

angular rxjs6

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

粘性标题使用 Angular 在内容上没有事件滚动

我正在尝试使用 Angular Material 设置两个粘性 div(一个标题,一个 sidenav)。当我向下滚动到我的内容时,粘性 div 可以工作,除了滚动事件。

在此处输入图片说明

当我向下滚动时,我有这样的事情:

在此处输入图片说明

我的问题是:当我向下滚动时,我没有来自 Angular 的任何滚动事件。如果我通过将值设置为 height css 属性来更改 style.scss 文件,则所有粘性 div 都不再起作用,但我有来自 Angular 的滚动事件。

这让我很紧张:(有什么想法可以解决这个问题吗?非常感谢!

样式文件

html, body { 
    min-height: auto; // sticky header doesn't work but scroll event Angular OK
    // height: 100%; // sticky header works but scroll event Angular NOK
}

body { 
    margin: 0; 
    font-family: Roboto, "Helvetica Neue", sans-serif; 
}
Run Code Online (Sandbox Code Playgroud)

粘性标题代码:

应用程序组件.html

html, body { 
    min-height: auto; // sticky header doesn't work but scroll event Angular OK
    // height: …
Run Code Online (Sandbox Code Playgroud)

angular-material angular

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

正则表达式删除数字和其他字符

我想通过使用正则表达式从我的打字稿字符串中删除一些数字和字符.我想我很接近,但我错过了一些东西.

在这里,我有弦乐之王:

  1. [15620584560] - 产品名称(种类)
  2. [1256025] - 产品名称(测试+ 1)
  3. [12560255544220] - 产品名称

我想要的是什么:

产品名称

这是正在使用的正则表达式.

product_name = product_name.replace(/\[[0-9]+\]/,'');
Run Code Online (Sandbox Code Playgroud)

javascript regex typescript

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