小编Iva*_*S95的帖子

我正在使用 OptionsAPI 和 Pinia Store 构建一个 Vue 3 应用程序，但我经常遇到一个问题，指出我试图在createPinia()调用之前访问该商店。

我一直在按照文档使用 Pinia 商店外部组件，但也许我没有以正确的方式做事。

情况如下：

我有一个登录屏幕 ( /login)，其中有一个 Cognito 会话管理器，我单击一个链接，完成 Cognito 的注册过程，然后重定向到主路由 ( /)，在此路由中，我还有一个子路由，显示一个Dashboard组件，其中我进行 API 调用。

在组件上Home，我使用以下方式调用存储useMainStore()，然后在从 Cognito 重定向后使用 URL 上的信息更新状态，然后我想在Dashboard.

这是我的Home组件，它本身工作得很好，因为我想象在创建 Pinia 实例后总是调用的钩子const store = useMainStore();内部。mounted()

<template>
  <div class="home">
    <router-view></router-view>
  </div>
</template>

<script>
import {useMainStore} from '../store/index'

export default {
  name: 'Home',
  components: {
  },
  mounted() {
    const store = useMainStore();

    const paramValues = …

为了重现性,请遵循Dockerfile:

# Dockerfile
FROM ubuntu:16.04

# pipenv install numpy pybind11 mako pyopencl

ENV PYTHONFAULTHANDLER=1 \
    PYTHONUNBUFFERED=1 \
    PYTHONHASHSEED=random \
    PIP_NO_CACHE_DIR=off \
    PIP_DISABLE_PIP_VERSION_CHECK=on \
    PIP_DEFAULT_TIMEOUT=100 \
    PIPENV_HIDE_EMOJIS=true \
    PIPENV_COLORBLIND=true \
    PIPENV_NOSPIN=true \
    PYTHONPATH=/app \
    LC_ALL=C.UTF-8 \
    LANG=C.UTF-8 \
    DEBIAN_FRONTEND=noninteractive

WORKDIR ${PYTHONPATH}
RUN apt-get update && apt-get install -y --no-install-recommends \
        python3-pip && \
    rm -rf /var/lib/apt/lists/*
RUN pip3 install pipenv

哪个可以用:

docker build -f Dockerfile -t pipenv_issue .

并运行:

docker run --rm -it pipenv_issue:latest bash

你可以尝试在其中:

pipenv install numpy

哪个会失败:

Creating …

我正在建立一个带有分页的表格，该表格可根据一组选定的复选框来处理一些操作；我有文档，到目前为止只选择了几行中的所有行，一切都很好；

我试图去上班的情景是这样的：如果我PageSize在我的paginator是“10”，我点击masterToggle，选择“所有”行，我想，要选择当前页面上的所有行，仅此而已，因此将是当前显示的10行PageSize，但是，这将选择整个dataSource表，该表大约有300条记录。

有没有一种方法可以masterToggle仅选择基于PageSize的显示行？然后，如果将更PageSize改为20，则只有前10个保持选中状态。

这是我的代码。

/** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

我正在开发一个mat-table实现分页、过滤、选择等的工具。我mat-select在其中一个标题列上有这个，我用来为mat-select同一列上的所有其他列设置全局值......像这样

到目前为止一切正常，但假设我选择了一个全局值，然后我增加了pageSize表的值，已经有选择的行将保持不变，但新的附加行将具有默认值；现在，如果我mat-select再次转到全局并单击相同的选项以将值应用于新行，则不会发生任何事情，因为我实际上并未更改选择；所以我试图基本上触发再次的SelectionChange事件，mat-select即使值实际上是相同的。

非常感谢任何帮助，我认为必须有一种非常简单的方法来完成这项工作，但我没有看到它；如果需要任何其他信息，请告诉我！

我开始使用 CSS Grid，我一直在阅读有关有助于响应的属性；所以我正在尝试构建一个包含 6 个元素的小网格；我的目的是让它们在较大的设备上显示为 2 行，如下所示：

并且为了将它们全部显示在较小的设备上，所以对于较小的设备来说一切都很好，我正在使用auto-fill它以保持响应，但是如果我在笔记本电脑屏幕或台式机上查看页面，它能够再填充一列最终看起来像这样：

这是我的grid布局代码。

display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;

有没有办法保持响应行为但也设置最大列数？任何帮助表示赞赏；如果它只能通过媒体查询来完成，那很好，但我首先尝试寻找不使用它们的方法。此外，我通过padding为整个网格容器设置水平以补偿附加列的大小，使其按预期工作；但同样，如果有更好的方法，我会全神贯注。谢谢！

工作示例 https://codepen.io/IvanS95/pen/NEYdxb

我正在我的mat-horizontal-stepper一个组件中实现 a并且我试图让错误状态显示在一个步骤上，如果我在[completed]属性存在时从它移开，但这并false没有发生。

我不确定使用该completed物业或类似的东西是否有一些限制；这是我到目前为止：

组件的 HTML

<mat-horizontal-stepper linear #auditStepper>
     <mat-step label="Choose a Company" [completed]="selectionClient.selected.length > 0">
     </mat-step>

     <mat-step label="Select a PPC Account" errorMessage="Select an Account" [completed]="selectionPPC.selected.length > 0">
     </mat-step>

     <mat-step label="Set Your Targets">  
     </mat-step>
</mat-horizontal-stepper>

组件的 TS

@Component({
  selector: 'app-new-audit',
  templateUrl: './new-audit.component.html',
  styleUrls: ['./new-audit.component.scss'],
  providers: [
    {
      provide:  STEPPER_GLOBAL_OPTIONS,
      useValue: { showError: true }
    }
  ]
})

在上面的代码中，我只提供了重要的东西；但是如果我正确地遵循了 Angular Material 文档，我需要做的是将它添加providers到组件（或我的主应用程序模块）中，仅此而已？

因此，例如，如果我进入第 2 步但保持completed条件为假，然后移至另一个步骤，则应触发错误，因为该步骤不再处于活动状态但也未完成。

我只是想了解一切是如何工作的，因为我没有为这个步进器使用反应形式或任何形式，因为我正在使用 MatTable；我只需要用户从表中选择一行（通过 MatTable 的选择功能），如果选择数组有一个元素，那么我可以将该步骤视为“完成”并允许移动到下一步。

Stackblitz …

我有一个 MatTable，它实现了 Angular Material文档中所示的选择

一切工作正常，做出选择等等；但我在想是否可以应用某种排序，以便我可以对数据源进行排序，以便首先显示选定的行。

<table mat-table matSort [dataSource]="dataSourcePPC" class="w-100 table-bordered table-hover">
   <ng-container matColumnDef="select">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let row" class="text-center">
          <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionPPC.toggle(row) : null;"
                        [checked]="selectionPPC.isSelected(row)">
          </mat-checkbox>
       </td>
   </ng-container>
   <ng-container matColumnDef="type">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
       <td mat-cell *matCellDef="let ppc">{{ ppcTypeModel[ppc.type] }}</td>
   </ng-container>

   ...

   <tr mat-header-row *matHeaderRowDef="displayedColumnsPPC"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumnsPPC;" [ngClass]="{'selected': selectionPPC.isSelected(row)}" (click)="selectionPPC.toggle(row)"></tr>
</table>

我正在研究这个sortingDataAccesor函数，但我真的不明白它是如何工作的；任何有关这方面的帮助表示赞赏。

我制作了一个简单的 CSS Flip 卡；一切都按预期工作，除了一件事，我注意到，如果我翻转卡片，会有一个区域（大约可见输入的一半），其中单击会触发卡片背面输入的焦点。

这会导致一些问题，因为自动完成将填充背面的输入，并且我无法输入当前的输入，因为除非我单击它的另一半，否则它不会获得焦点。

这是 stackblitz 的例子。如果您单击“忘记密码？”，它将打开并显示显示“登录”面孔的卡片。通过一次输入，卡片将翻转并显示另一张脸，您可以在此处看到上述行为。

https://stackblitz.com/edit/angular-h8pca9

您还可以看到，如果使用 DevTools 检查，一半输入检查背面控件，另一半检查当前输入：

注意这里检查器显示#username输入

#email当我将鼠标悬停在同一输入的右侧时，它显示了输入

我的导航栏上有一个图标，用作admin路线的链接，我希望当我在该特定路线上时更改此图标，为此我可以将类替换mdi-settings-outline为mdi-settings，这将显示填充版本相同的图标。

<li class="nav-item">
    <a routerLink="/admin" routerLinkActive="mdi-settings" class="nav-link mdi mdi-settings-outline"></a>
</li>

然而，常规routerLinkActive指令只会将类添加mdi-settings到链接中，这不会产生所需的结果。routerLinkActive 指令是否可以以某种方式替换该类，而不仅仅是添加它？

我有一个现有的 Astro 组件，它的模板中已经包含了一些类；但是我试图在不同的视图上重用此组件，并仅在该视图上更改其标题的颜色。

所以我读到文档说我可以传递一个classprop 将类从父级添加到子级；但是，我不明白如何保留组件中的现有类并覆盖某些内容或将另一个类添加到已有的类中。

<ExpansionQuestion question={question.question}>
  <Fragment slot="body" set:html={question.answer} />
</ExpansionQuestion>

ExpansionQuestion根元素：

<details
  class="group bg-blue-gray duration-300 rounded-lg p-4 w-full shadow-md focus:outline-none focus:ring-0"
>

我只想在一个特定视图上bg-secondary向元素添加一个不同的类details，其余类应该在各处保持相同。

是否有可能做到这一点？