小编kal*_*l93的帖子

我在浏览器中有一个像这样的查询字符串https://application.com/loader/?orderNumber=313Q&tracerId=PLM5689。

我想保持查询中的键不区分大小写，即如果ORDERNUMBER=313Q和TrAcErid=PLM5689

或者

ordernumber=313Q和tracerid=PLM5689

仍然会以同样的方式工作。

到目前为止，我正在使用一种解决方法，通过迭代params.keys并基本上检查它是否与我的参数匹配。

    this.activatedRoute.queryParamMap.subscribe(params => {

      params.keys.forEach(key => {
        if (key.toLowerCase() === 'ordernumber') {
          this.ordernumber= params.get(key);
        }
        if (key.toLowerCase() === 'tracerid') {
          this.tracerid= params.get(key);
        }
      });
 });

是否有更好的方法来处理这个问题或某种使用查询字符串的最佳实践。我预计我的应用程序中会经常需要它。

虽然这可行，但感觉像是一种很奇怪的方法。我遇到了一些帖子，建议查询字符串中的参数区分大小写，但我似乎并不理解它。

RFC 3986：https://www.rfc-editor.org/rfc/rfc3986#section-6.2.3

这https://webmasters.stackexchange.com/questions/90339/why-are-urls-case-sensitive

我一直在尝试应用多列过滤，即列标题中的文本输入将仅对列的内容进行过滤。到目前为止，我已经能够通过覆盖使其工作filterPredicate，MatTableDataSource但是一旦我覆盖了默认过滤，即跨列不再有效。

export class TableFilteringExample implements OnInit
{
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  positionFilter = new FormControl();
  nameFilter = new FormControl();

  filteredValues =
  {
    position: '',
    name: '',
    weight: '',
    symbol: ''
  };

  ngOnInit()
  {
    this.positionFilter.valueChanges.subscribe((positionFilterValue) =>
    {
      this.filteredValues['position'] = positionFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.nameFilter.valueChanges.subscribe((nameFilterValue) =>
    {
      this.filteredValues['name'] = nameFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.dataSource.filterPredicate = this.customFilterPredicate();
  }

  applyFilter(filterValue: string)
  {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    this.dataSource.filter = filterValue;
  }

  customFilterPredicate()
  { …

我正在尝试创建一个包装器,MatTabs它暴露了所有的属性MatTabs并且遇到了这个问题: Angular Material选项卡不能使用包装器组件.我添加了其他标签属性和事件.这些事件似乎正在触发.

添加新选项卡时出现问题.阵列正在更新,但UI保持不变.

HTML

<div>
  <span class="example-input-label"> Selected tab index: </span>
  <mat-form-field>
    <input matInput type="number" [formControl]="selected">
  </mat-form-field>
</div>

<div>
  <button mat-raised-button
          class="example-add-tab-button"
          (click)="addTab(selectAfterAdding.checked)">
    ADD NEW TAB
    <br/>
  </button>
  <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
</div>

<custom-tabs [selectedIndex]="selected.value"
               (sqSelectedIndexChange)="selected.setValue($event)">
  <custom-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab
    <button mat-raised-button
            class="example-delete-tab-button"
            [disabled]="tabs.length === 1"
            (click)="removeTab(index)">
      Delete Tab
      <br/>

    </button>
  </custom-tab>
</custom-tabs>

TS

tabs = ['First', 'Second', 'Third'];
  selected = …

我有一个有角度的材质表，该表使用detailRow指令将明细/同级相邻行插入到表行中。

StackBlitz

我想给它一个外观，好像该行正在扩展或折叠一样，因此我向其中添加了几个图标，这些图标可以在包含它们的单元格单击时切换。

<mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
      <mat-cell *matCellDef="let element"> 
         <button mat-icon-button color="primary"  (click)="element[i] = !element[i]">
            <mat-icon id="expand_more"  #expand_more *ngIf="!element[i] "  >expand_more</mat-icon>
            <mat-icon id="expand_less"  #expand_less *ngIf="element[i] ">expand_less</mat-icon>
          </button> 
      </mat-cell>

但是，如果我将行扩展并进行分页或进行某种排序，则图标不会切换，因为无法切换它们。

我试过挂入page事件或sortChange事件，但空了。

我知道，有一种新方法可以在角形材质v7中进行扩展/折叠，这可能与分页和排序效果很好，但是在升级之前还需要一段时间，与此同时，对于解决该问题，任何人都没有任何想法。

我一直在寻找垫表中列上的过滤器的任何示例，但到目前为止还没有找到任何示例。我确实提供了一些有关方法的零碎信息，filterPredicate但没有确切地了解如何处理它。

我的需要是，单个列应该有一个过滤器，例如文本框或复选框，dataSource将根据其进行过滤。

斯塔克闪电战