小编Bri*_*ley的帖子

我试图mat-tooltip从角度材料2 应用一些css更改,并在文档中找到,matTooltipClass然后可以在css文件中进行选择以进行更改.但是,我无法让它工作.

component.html:

  <mat-cell 
    *matCellDef="let productInfo" 
    matTooltip="{{productInfo.description}}"
    matTooltipClass="tooltip">
     {{ productInfo.description}}
  </mat-cell>

component.scss:

.tooltip {
background-color: red;
color: blue;
font-size: 20px;
}

我正在尝试将一个 formGroup 添加到我的整体表单中，条件是在我的情况下特定字段属于某种类型。我添加此 formGroup 的函数如下所示：

  initSocial() {
      const group = <FormGroup>this.cardForm;
        group.addControl(
          'social': this._fb.group({
            'fb': new FormControl(this.currentCard.social.fb),
            'yt': new FormControl(this.currentCard.social.yt),
            'ig': new FormControl(this.currentCard.social.ig),
            'tw': new FormControl(this.currentCard.social.tw),
          })
        )
  }

现在，在“社交”说“，”之后，冒号下出现打字稿错误。我无法对此进行测试以查看 addControl() 是否会起作用。

My function to fire initSocial is in ngOnInit and looks like this:

      if(this.currentCard.cardType === "brand"){
        this.initSocial();
      }

Any help/tips/suggestions would be much appreciated.

我正在使用垫表来显示一些信息。我有一个使用 mat-icon 进行编辑的列，上面有一个点击侦听器。我从该图标触发的函数需要一个索引号，然后从我用来填充 dataTableSource 的数组中提取索引号。然而，由于使用了材料分页器，传递的索引号已关闭。它传递当前页面长度上显示的行的索引，而不是提供给 dataTableSource 的整个数据数组中的项目索引。

组件.html：

<mat-table #table [dataSource]="productData">

**Other Columns**

  <ng-container matColumnDef="editItem">
    <mat-header-cell *matHeaderCellDef> Edit Item </mat-header-cell>
    <mat-cell *matCellDef="let productInfo"> <mat-icon matTooltip="Edit 
    List" class="pointer">edit</mat-icon> </mat-cell>
  </ng-container>

</mat-table>

组件.ts：

editProductList(index) {
this.productListService.changeProductId(this.productList.data[index].id);
this.router.navigate(['ProductList/Edit']);
}

我是否必须牺牲 mat-paginator 才能获得我正在寻找的功能？如果没有，我怎样才能捕获 mat 表中项目的正确索引？

非常感谢帮助和提示。

我正在尝试为已禁用分配给布尔值的按钮编写单元测试。

html看起来像：

<button *ngIf="!data" id="createBtn" mat-button color="primary" (click)="submitNewCase()" [disabled]="disableCreate">{{ 'ACTIONS.create' | translate }}</button>

我的单元测试：

beforeEach(() => {
 fixture = TestBed.createComponent(CaseComponent);
 component = fixture.componentInstance;
 fixture.detectChanges();
 submitEl = fixture.debugElement.query(By.css('button'));
});


  it('DisableCreate set to true disables the submit button', () => {
   component.disableCreate = true;
   fixture.detectChanges();
   expect(submitEl.nativeElement.disabled).toBeTruthy();
  });

  it('DisableCreate set to false enables the submit button', () => {
   component.disableCreate = false;
   fixture.detectChanges();
   expect(submitEl.nativeElement.disabled).toBeFalsy();
  });

我的第二个单元测试成功，而我的第一个没有成功。我正在返回“预期为真实的错误”。我找不到失败的地方和原因。

任何帮助将非常感激。

我有一个垫子扩展面板，我想将其扩展到它下方的元素上，而不是简单地向下移动该元素。我尝试调整 mat-expansion 元素的 z-index 但这不起作用。我在 angular material docs/github 中没有看到任何表明可以这样做的内容。有没有人这样做过或知道如何实现？

任何帮助/提示/建议将不胜感激。

更新： 我想要的解决方案应该与此类似。它可以包含多个元素（垫子选择、日期选择器等。）

我正在尝试将 angular material 和 cdk 从版本 7 更新到 8。包更新对两者都很好，但是每次迁移都失败，并出现一个非常“有用”的错误

无法读取未定义迁移失败的属性“绿色”。有关更多详细信息，请参见上文。

我很难追踪这可能来自哪里。我在我的项目中对“绿色”进行了通用搜索，但一无所获。我已经擦除了我的 node_modules 并重新安装，但继续得到这个。

我什至在尝试单独执行迁移时得到了这个

ng update @angular/material@8 --migrationOnly=true --from=7 --to=8

任何建议/帮助将不胜感激。

我正在尝试从URL（看起来像https://something.com/card?id= uuid进入的地方）中获取一个uuid，然后使用该uuid来获取http get请求。

现在我有我的app.component.ts看起来像：

private cardUuid: string;

constructor(private service: AppService,
            private route: ActivatedRoute){
            let sub = this.route.params.subscribe((params: Params) => {
                  this.cardUuid = params['id'];
                  console.log(this.cardUuid)
                })

}


ngOnInit(){
  this.service.browserUuid = 'http://address/cards?uuid=' + this.sub.cardUuid;
    console.log(this.sub.cardUuid)

}

我的控制台日志返回为未定义。我想知道为什么会这样吗？获取uuid的方法是否错误或呼叫计时是否错误？

任何帮助/提示/建议将不胜感激。

更新： 根据@Alexander Staroselsky的建议，我重新构造了每个angular.io文档从url调用uuid的方法。

app.component.ts：

card: Card = {};

ngOnInit() {
 this.route.paramMap
  .switchMap((params: ParamMap) =>
    this.service.fetchCardUuid(+params.get('id')))
  .subscribe(
    card => {
      this.card = card;
      this.getVenueUuid(this.card);
    });
}

app-service.ts：

public UuidUrl = 'http://websiteaddress/cards?uuid='

constructor(private http: Http){}


private extractData(res:Response) {
  let body = res.json();
  return body …

我的后端有两个字符串数组,我必须用一个字符串或多个字符串填充.但它们不是关键值对.我试图将一个字符串推入其中一个数组,但遇到的事实是我没有,也无法指定一个控件:值对.

我的formArray看起来像

collections: new FormArray([]),

我的html选择字符串

              <md-select placeholder="Collection">
            <md-option (click)="addCollectionId('one')" value="Local">Local</md-option>
            <md-option (click)="addCollectionId('two')" value="Music">Music</md-option>
            <md-option (click)="addCollectionId('three')" value="Performing Arts">Performing Arts</md-option>
            <md-option (click)="addCollectionId('four')" value="Sports">Sports</md-option>
            <md-option (click)="addCollectionId('five')" value="Restaurants">Restaurants</md-option>
          </md-select>

我将字符串添加到formArray的逻辑如下:

  addCollectionId(id: string) {
const control = <FormArray>this.createCardForm.controls['collections'];
control.push(id);

}

我收到错误'类型'字符串的参数'不能分配给'AbstractControl'类型的参数.

因为我无法推送一个控件:值对而只有字符串/字符串如何在保持整体形式的同时将字符串推送到数组？

任何帮助/提示/建议将不胜感激.

我正在使用以下功能打开Mat对话框：

accept() {
 let dialogRef = this.dialog.open(AcceptDialogComponent, {
  data: {
    hasAccepted: false
      }
    })
 dialogRef.afterClosed().subscribe(result => {
  console.log(result);
  if (result.hasAccepted === true) {
    this.leadService.acceptLead(this.holdingAccountId, this.lead.id)
    .pipe(
      takeUntil(this.onDestroy$)
    )
    .subscribe (acceptLeadRes => {
      console.log(acceptLeadRes);
      this.leadService.updateLeadAction('accept');
    },
    (err: HttpErrorResponse) => {
      console.log(err);
      this.router.navigate(['/error']);
    });
   }
 });
}

我试图为此功能编写一个测试，该测试仅触发afterClosed（），以便可以检查是否调用了我的进行后端调用的服务方法。

component.spec.ts（在创建每个测试平台之前）

beforeEach(async(() => {
TestBed.configureTestingModule({
  declarations: [ LeadCardComponent, AcceptDialogComponent ],
  imports: [ 
    requiredTestModules,
    JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return '';
        }
      }
    })
  ],
  providers: [ 
    ApplicationInsightsService,
    JwtHelperService,
    // { provide: LeadsService, …

我最近在我的项目中运行了 npm update 。完成后，每当我尝试运行 ngserve 时，我都会得到一个

错误：找不到模块“@ngtools/json-schema”

然而，在我的 node_modules 文件中，很明显存在一个 @ngtools 文件。我尝试卸载并重新安装 angular-cli 但仍然收到此错误。

包.json

"dependencies": {
"@angular/animations": "^4.4.6",
"@angular/cdk": "^2.0.0-beta.12",
"@angular/common": "^4.4.6",
"@angular/compiler": "^4.4.6",
"@angular/core": "^4.4.6",
"@angular/forms": "^4.4.6",
"@angular/http": "^4.4.6",
"@angular/material": "^2.0.0-beta.12",
"@angular/platform-browser": "^4.4.6",
"@angular/platform-browser-dynamic": "^4.4.6",
"@angular/router": "^4.4.6",
"auth0-js": "^8.11.3",
"auth0-lock": "^10.24.1",
"bootstrap": "^3.3.7",
"chart.js": "^2.7.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"ng2-charts": "^1.6.0",
"rxjs": "^5.5.2",
"zone.js": "^0.8.4"
},

  "devDependencies": {
"@angular/cli": "^1.5.2",
"@angular/compiler-cli": "^4.4.6",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.92",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1", …