小编ine*_*now的帖子

我正在一个使用 Material 的 Angular 项目中工作。

我有一些带有轮廓外观输入的垫子表单字段。我想更改轮廓的边框半径（增加它）。

我阅读了此 stackoverflow：How to remove theoutline mat-form-filed bordercorner radius。

但这些解决方案都不允许我正确地增加边界。它很接近，但它会在输入的左侧引起奇怪的事情：

我不想使用封装。我用起来没问题::ng-deep。

这是一个 stackblitz 演示：https://stackblitz.com/edit/angular-9-material-starter-pp4349 ?file=src%2Fapp%2Fapp.component.css

我正在从事一个用 Karma/Jasmine 进行测试的 Angular 项目。默认情况下，角度测试按随机顺序运行，如果按特定顺序运行，可能会导致测试失败。

我注意到在我的浏览器运行程序中，它显示了运行测试所使用的随机种子。
运行测试时，我可以指定这个种子，以便我可以多次测试相同的订单吗？（所以我可以将这个种子传递给其他人，以显示他们的测试失败的顺序）。

我想增加 Angular 8 项目页面上 Material Slide Toggle 的大小。我尝试将尺寸设置为大，如下所示：

<mat-slide-toggle size="large" color="primary"></mat-slide-toggle>

然而，将尺寸从小、中、大改变没有任何改变。它保持与屏幕尺寸相同。我还尝试向组件添加样式，如下所示：

mat-slide-toggle {
  height: 100px;
  width: 100px;
}

但这不会改变可见组件的大小，但会增加组件所在的 div 。

如何更改 Material Slide Toggle 组件的大小？

我正在使用 Angular。

我想知道是否需要构造函数，并且希望获得一些见解。在几个类中，我的构造函数大部分时间都是空的，而我的服务类也有空的构造函数。

这些空的构造函数可以被删除吗？没有构造函数的类与有空构造函数的类相比是否有任何负面影响？

我正在使用 Material 从事 Angular 9 项目。

我有一个支持排序（Mat-sort）的材质表。该排序运行良好。我现在只想允许某些列根据条件进行排序。有没有办法将mat-sort-header属性设置为条件？

这是我的表格和列：

<table mat-table [dataSource]="dataSource" matSort (matSortChange)="setSortInRoute()">
    <ng-container *ngFor="let column of tableConfig.columns">
      <ng-container matColumnDef="{{ column.columnDef }}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.title }}</th>
        <td mat-cell *matCellDef="let row">
          {{ row[column.dataProperty[0]] }}
        </td>
      </ng-container>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: displayedColumns"
      (click)="goToDetails(row)"
    ></tr>
  </table>

我尝试将mat-sort-header属性设置为一个条件，如下所示：布尔变量在[mat-sort-header]="sortColumn"哪里。sortColumn然而，即使 var 为 false，列仍然具有排序功能。

我计划让条件成为来自 的布尔变量tableConfig.columns，它可能是tableConfig.columns.allowSort。

有没有办法将此属性设置为条件？如果没有，关于如何实现这一目标有什么建议吗？

谢谢

我想测试下面的代码，但我不确定如何测试地图和点击（来自 RXJS）功能。我应该模仿，使用间谍吗？

我真的应该测试这些吗？我有一个习惯，即只为了实现该目标（100% 覆盖率）而获得 100% 覆盖率，但我了解到 100% 并不总是需要的或有益的。但在这种情况下，地图和点击对于该功能来说非常关键。我真的很感激任何建议，谢谢。

我正在使用 Angular 9。

红线未经测试。

我正在从事 Angular 10 项目，我还使用 firebase 托管和云 firestore （用于数据库）。我也在我的项目中使用 AngularFire。

我的项目已经能够从我的 firestore 集合中获取文档并显示它们（也可以编辑、删除和创建它们）。我还设置了身份验证，使用 AngularFireAuth 进行登录和注销。我还设置了路由防护，仅允许用户在登录后访问信息。

我发现 Firestore 也有规则，您应该设置它们以保护您的收藏。目前，我基本上没有规则（测试模式），但我想添加基本的“只有用户可以访问任何内容”规则，但遇到了问题。

我认为这就是问题所在，目前，登录我的应用程序后会将用户存储在本地存储中。我认为我需要以不同的方式存储它，以便我从之前给出的凭据重新登录，而不是仅仅检查是否有本地存储。仅ERROR FirebaseError: Missing or insufficient permissions当我的警卫检查本地存储以确保登录时，我才会收到错误，如果我先登录，则不会收到错误。

那么，我应该如何保存用户数据，以便不必在每次刷新时登录，但可以验证 Firebase 的身份验证？我知道我可以将电子邮件/密码存储到本地存储并检查以重新登录，但这对我来说似乎不安全。

我认为以上是问题所在，但不能100%确定。

这是我的 Firestore 规则：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
  allow read, write: if request.auth != null
    match /{document=**} {
      allow read, write: if request.auth != null //should only allow users?
    }
  }
}

这是我的身份验证服务（我在其中处理登录/注销并检查本地存储是否有用户）。

export class AuthService {
  constructor(private aFAuth: AngularFireAuth, public router: Router) {
    //I honestly don't …

我正在从事 Angular 9 项目。

我有一个组件接受 formBuilder 作为来自父组件的输入。这是我的子组件（我正在测试的组件）：

export class ChildComponent implements OnInit {
  @Input() parentForm: FormGroup;  //this is coming from the parentComponent

  ngOnInit(): void {
    if (this.parentForm) {
      this.filteredSelectables = this.parentForm
        .get("recipientTypes")
        ...
    }
  }
...

我想为此组件编写测试，但我需要创建一个测试可以使用的表单（或者我需要模拟父组件并返回我想要的表单？）

我已将 FormBuilder 添加到 testBed 提供程序中，但我仍然不知道如何制作可以测试的模拟表单。“应该创建”测试正在通过，但我无法测试其他任何内容，因为它们的parentForm 不能为空。这是我当前的测试：

describe("ChildComponent", () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent, MatAutocomplete],
      providers: [FormBuilder],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(ChildComponent);
        component = fixture.componentInstance;
      });
  }));

  beforeEach(() => { …

我正在 Angular 11 项目中工作。这个项目中的很多导入都使用相对路径或绝对路径。

我为这个项目设置了 ESLint，我想阻止相对导入路径，只允许绝对路径。但我没有找到这样做的规则。
我发现：no-relative-parent-imports，但它没有给我这样的路径问题：import { HttpService } from "../http/http.service";或import { RouterService } from "../../services/router/router.service";（两者都不是绝对路径，它们的绝对路径分别是import { HttpService } from "app/services/http/http.service";和import { RouterService } from "app/services/router/router.service";。

我读过这篇文章：https : //medium.com/@aayush123/escaping-relative-import-hell-react-native-eslint-atom-57dc2cae5bcc
但我想避免添加像 Babel 这样的东西，如果我可以避免的话.

ESLint 是否有阻止任何类型的相对路径的规则？只允许绝对路径？

我正在制作一个前端带有 Angular 的 Web 应用程序，后端带有 golang 和 mongo 的数据库。我已经启动并运行了数据库，并且所有路由请求都已经过测试并且正在 Postman 上运行。但是，当我尝试对 Angular 应用程序的服务发出 DELETE 请求或 PUT 请求时，出现以下错误：

“从来源“ http://localhost:4200 ”访问“-my api url-”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否“Access-Control-Allow-” Origin'标头存在于所请求的资源上。”

我可以发出 GET 和 POST 请求，但不能发出 DELETE 或 PUT 请求。

我该如何解决这个问题？这是前端问题还是后端问题？任何帮助将不胜感激。谢谢。

PS：我正在使用 mongoHandlers。

这是我在前端的服务：

deleteShow(showId: string) {
    let headers = new HttpHeaders();
    headers.append("Content-Type", "application/json");
    return this.http
      .delete<Show>(`${environment.apiBase}/shows/${showId}`, {
        headers
      })
      .pipe(catchError(this.handleError));
  }

后端代码：

路线：

func RouteShows(r *mux.Router, shows handlers.ShowHandler) {

    sub := r.PathPrefix("/api/shows").Subrouter()

    sub.HandleFunc("", getShows(shows)).Methods(http.MethodGet)
    sub.HandleFunc("/{id}", getShowById(shows)).Methods(http.MethodGet)
    sub.HandleFunc("/{id}", updateShow(shows)).Methods(http.MethodPut)
    sub.HandleFunc("", createShow(shows)).Methods(http.MethodPost)
    sub.HandleFunc("/{id}", deleteShow(shows)).Methods(http.MethodDelete)
    sub.HandleFunc("/status/{status}", …