小编Pau*_*ard的帖子

我正在构建一个仪表板并想使用 CSS 网格。我设置了 4 列网格。在第 3 行中，我需要其中 2 个项目跨越 1.5 列。

如何使 D 和 E 的宽度相等，以便它们各自占据可用空间的一半，并且它们加起来等于 C 的宽度？我需要创建不同的列结构吗？ 代码笔

body {
  margin: 40px;
}

.wrapper {
		display: grid;
    grid-gap: 5px;
		grid-template-columns: [col1-start] 1fr  [col2-start] 1fr [col3-start] 1fr [col4-start] 1fr [col4-end];
		grid-template-rows: [row1-start] .75fr [row2-start] 2fr [row3-start] 4fr [row4-start] 1fr [row5-start] 1fr [row6-start] 1fr [row6-end];
		background-color: #fff;
		color: #444;
	}

	.box {
		background-color: #444;
		color: #fff;
		border-radius: 5px;
		padding: 20px;
		font-size: 150%;

	}

	.a {
		grid-column: col1-start / col4-start;
		grid-row: row1-start …

为了简单起见，在构建两列表单时，我使用弹性框将其构建在两个单独的 div 中。然而，该表格是从左到右读取的，即名字位于第一个分区的顶部，姓氏位于第二个分区的顶部。如果用户使用 Tab 键在输入之间移动，则 Tab 键将在表单中向下移动而不是横向移动。这是我的疏忽，但我想知道输入之间的选项卡是否可以设置为与默认值不同。也许一张图片会有帮助。

所以我想将其更改为制表符。我该怎么做呢？另外，实际的表单比下面显示的更复杂，所以我不想重建 html。

我的 HTML

<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="space-between center">
 <div fxFlex="40">
   <mat-form-field class="formFieldLeft">
    <div class="is-size-7 has-text-grey-light mbxs">First Name</div>
    <input matInput formControlName="firstName">
   </mat-form-field>
<mat-form-field class="formFieldLeft">
  <div class="is-size-7 has-text-grey-light mbxs">Email Address</div>
  <input matInput formControlName="email">
</mat-form-field>
<mat-form-field class="formFieldLeft mblg">
  <div class="is-size-7 has-text-grey-light mbxs">Company Phone Number</div>
  <input matInput formControlName="companyPhoneNumber">
</mat-form-field>

<div fxFlex="60">
  <mat-form-field class="formFieldRight">
    <div class="is-size-7 has-text-grey-light mbxs">Surname</div>
    <input matInput formControlName="lastName">
  </mat-form-field>
  <mat-form-field class="formFieldRight">
    <div class="is-size-7 has-text-grey-light mbxs">Job Title</div>
    <input matInput formControlName="jobTitle">
  </mat-form-field>
  <mat-form-field class="formFieldRight mblg">
    <div …

我有一个ngFor带有课程列表的可观察对象。此列表上方是一行复选框，选中/取消选中时可以成功过滤列表。我正在尝试添加一个输入框来搜索和过滤同一列表。因为复选框通过更新behaviour subject提供可观察到的课程来工作，所以我无法使过滤工作。我认为下面的代码会过滤并返回可观察的课程，并且它会在模板中自动更新。但它没有任何效果。我整理了一个Stackblitz。如何使用复选框和搜索输入框过滤列表？

textFilter(searchString: string) {
  console.log(searchString)
  return this.courses
  .pipe(map((courses) => courses.filter( course => 
     course.Name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1))
  );
}

我有一个名为filteredUserNames 的列表，其中包含很多用户。每次我更改表单上的值时，它都会启动一个新的数据过滤器。我知道为了延迟时间，以便不是每个角色都会触发新的过滤器，我需要使用去抖动，但我不确定在哪里添加它。它应该在值更改订阅内吗？另外，正确的实施方法是什么？

我有

searchString = new BehaviorSubject("");
searchString$ = this.searchString.asObservable();

在构造函数中

this.myForm = this.fb.group({
  searchString: [""],
});
this.myForm.controls.searchString.valueChanges.subscribe((val) => {
// SHOULD THE DEBOUNCE GO HERE ?? //  
this.searchString.next(val);  
}

在ngOnInit

this.searchString$.subscribe((searchTerm) => {
      console.log(this.userNames);
      if (this.userNames !== undefined) {
      this.filteredUserNames = this.userNames.filter(
        (userName) =>
          userName.searchTerms
            .toLowerCase()
            .indexOf(searchTerm.toLowerCase()) !== -1
      );
      };
    });

我无法弄清楚如何将选定的值发送到垫选择中的函数。我见过的所有例子都使用 ngModel。

在我的应用程序的 ipad 版本中，我有一个垫选择，在桌面版本上，我有一个列表，每个项目上都有一个（单击）。在桌面版本上，如果我单击该项目，我可以获得该项目的 id，因为它位于 *ngFor 内。

在 mat-select 上，(valueChange) 位于 *ngFor 的上方和外部。那么如何将所选选项的 id 发送到 valueChange 函数呢？

<mat-select (valueChange)="consolelog(**Need to pass catalog.id here**)">
 <mat-option *ngFor="let catalog of catalogTitles" value="catalog.title">{{catalog.title}}</mat-option>
</mat-select>

我有以下数组的对象,

{ name: 'Hundred Monkeys',
 address: '52 High Street Glastonbury BA6 9DY' },
{ name: 'J.C Thomas and sons ltd',
 address: 'Thomas Way Glastonbury BA69LU' },
{ name: 'Lady Of The Silver Wheel',
 address: '13 Market Place Glastonbury BA6 9HH' },
{ name: 'The Chalice Well',
 address: '85-89 Chilkwell Street Glastonbury BA6 8DD' },
{ name: 'The Glastonbury Wire Studio',
 address: '48a High Street Glastonbury BA6 9DX' },
{ name: 'The Isle of Avalon Foundation',
 address: 'The Glastonbury Experience, 2-4 …

我正在寻找用另一个 Observable 中保存的值来过滤 Observable 的最佳 RxJs 方法。

首先，我有一个包含来自路径 Params 的代码的可观察对象。假设它的股票代码为“BTC”$

然后我有一个可观察的商店，它返回 fullCoinList$ 中的硬币列表（其中 1414 个）

我希望 this.coin$ observable 仅包含 this.fullCoinList$ observable 中的项目，该项目在股票名称中的某处包含字符串“BTC”。

FullCoinList$ 看起来像这样。

  [{ticker: "ETHBTC", price: "0.04597600"}
   {ticker: "LTCBTC", price: "0.00457100"}
   {ticker: "BNBBTC", price: "0.01008450"}
   {ticker: "NEOBTC", price: "0.00163300"}
   {ticker: "QTUMETH", price: "0.00541200"}
   {ticker: "EOSETH", price: "0.00229400
   .... + 1408more]

我的 NgOnInit 看起来像这样

ngOnInit(): void {
    this.activatedRoute.paramMap.subscribe( (params: ParamMap) => {
      this.ticker$ = of(params.get('ticker'))
    })

    this.fullCoinList$ = this.store.pipe(select(selectAllCoins))
    
    this.coins$ = this.fullCoinList$.pipe(
      filter( coin => coin.ticker.includes(this.ticker$)) // this line needs …