小编Dav*_*983的帖子

摆脱Angular Material模态对话框周围的空白区域

我想摆脱Angular Material模态对话框中的空白区域.我如何设计CSS的样式,以便看不到任何白色?我的css到目前为止:

app-commission-me-dialog {
    margin: 0px;
    padding: 0px;
}

.mat-dialog-container {
    margin: 0px;
    padding: 0px;
}
Run Code Online (Sandbox Code Playgroud)

angular-material2 angular

17
推荐指数
2
解决办法
1万
查看次数

在pandas数据帧上使用str.contains

这个pandas python代码生成错误消息,

"TypeError:一元〜:'浮动'的坏操作数类型"

我不知道为什么因为我试图操纵一个str对象

df_Anomalous_Vendor_Reasons[~df_Anomalous_Vendor_Reasons['V'].str.contains("File*|registry*")] #sorts, leaving only cases where reason is NOT File or Registry
Run Code Online (Sandbox Code Playgroud)

有人有任何想法吗?

python arrays string excel pandas

16
推荐指数
1
解决办法
7338
查看次数

使用 jest 和 React-testing-library 测试正确的 SVG 组件渲染

我在 React 组件中有一个有条件渲染的 svg。

<div className='avatar'>
      {gender === true ? <MaleAvatar /> : <FemaleAvatar />}
    </div>
Run Code Online (Sandbox Code Playgroud)

MaleAvatar 和 FemaleAvatar 是包含 svgs 的组件。最初,我希望渲染 MaleAvatar svg,然后如果性别值更改为 false,FemaleAvatar svg 就会渲染 - 但男性头像应该首先渲染,这就是我想要测试的。

条件所在的组件是子组件的子组件,但我正在通过文本测试该组件中的元素,并且测试工作正常,例如:

const personDetailsText = screen.getByText('Personal details')
Run Code Online (Sandbox Code Playgroud)

我正在使用 jest 和 react-testing-library 进行测试,但是在父 div 上使用测试 id 然后抓取第一个子项不起作用,因为它无法识别测试 id。所以如果我有:

<div data-testid='avatar' className='avatar'>
          {gender === true ? <MaleAvatar /> : <FemaleAvatar />}
        </div>
Run Code Online (Sandbox Code Playgroud)

...然后下面的测试在 'const avatarSVG = screen.getByTestId('avatar')' 处失败:

test('gender avatar is male on initialisation', () => {
    const avatarSVG = screen.getByTestId('avatar')
    expect(avatarSVG).toBeInTheDocument()
    expect(() => …
Run Code Online (Sandbox Code Playgroud)

svg reactjs jestjs react-testing-library

11
推荐指数
2
解决办法
5万
查看次数

React Hooks 状态总是落后一步

我在 React 中有各种函数,我需要使用 useState 更改状态,然后根据新状态是否满足某些条件执行一些操作。

当使用 prop="newpassword" 调用 handleChange 时,这会使用 useState 中的 setValues 方法来设置 newpassword 的值。然后使用正则表达式测试评估新密码,如果有效,则状态变量passwordIsValid 应设置为true。

const handleChange = prop => event => {
    setValues({ ...values, [prop]: event.target.value })

    if (prop === 'newpassword' && passwordValidation.test(values.newpassword)) {
      setValues({ ...values, passwordisValid: true })
      console.log(prop, values.passwordisValid)
    } else {
      console.log(prop, values.passwordisValid)
    }
  }
Run Code Online (Sandbox Code Playgroud)

状态总是落后一步 - 我知道这是因为 useState 是异步的,但我不知道如何使用 useEffect 来检查状态?对 hooks 很陌生,有人可以帮助我吗?

reactjs react-hooks

10
推荐指数
1
解决办法
1万
查看次数

Angular 4 Routing不适用于实时网络应用程序

我的Angular 4网络应用程序路由在我的开发环境中运行良好,菜单重定向在实时版本上工作正常.

但是,dev版本通过在浏览器的地址字段中键入来重定向到不同的页面,但实时版本不会.这是一个角度问题吗?或者我是否需要使用ISP管理重定向?

我的app.router.ts代码如下:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';

export const router: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent },
{ path: 'art', component: ArtComponent },
{ path: 'music', component: MusicComponent },
{ path: 'events', component: EventsComponent }
];

export …
Run Code Online (Sandbox Code Playgroud)

routing url-routing typescript angular

6
推荐指数
1
解决办法
8833
查看次数

在 Django REST Framework 中使用 url 传递查询

我觉得这应该很简单,但我所做的并没有得到回报。

在 Django 中,我的应用程序中有这个 urls.py:

from django.urls import path

from .views import PostcodessAPIListView, PostcodesAPIID, PostcodesWithinRadius

urlpatterns = [
    path("<str:postcode>/<int:radius_km>", PostcodesWithinRadius.as_view(), name="results_api_radius"),
    path("", PostcodessAPIListView.as_view(), name="results_api_list"),
    path("<int:pk>", PostcodesAPIID.as_view(), name="results_api_detail"),
]
Run Code Online (Sandbox Code Playgroud)

我有这个观点,应该取一个邮政编码和一个以公里为单位的半径,调用外部api将邮政编码转换为经度和纬度,然后再次调用外部api以获取一定半径内的邮政编码。

class PostcodesWithinRadius(generics.RetrieveAPIView):
    serializer_class = PostcodeSerializer

    def get_queryset(self):
        postcode = self.request.query_params.get('postcode', None)
        radius_km = self.request.query_params.get('radius_km', None)
        print(postcode, radius_km)
        postcodes = self.get_postcodes_within_radius(postcode, radius_km)
        print(postcodes)
        return Postcode.objects.filter(postcode__in=postcodes)

    def get_postcodes_within_radius(self, postcode, radius_km):

        radius_km = 3
        postcodes_within_radius = []

        if radius_km <= 20:
            radius = radius_km * 1000
        else:
            raise ValueError('Radius cannot be over 20km.')

        GET_LAT_LON_URL …
Run Code Online (Sandbox Code Playgroud)

django parameters django-urls django-rest-framework

6
推荐指数
2
解决办法
4975
查看次数

如何为隐藏的Angular Material类关闭flex布局

检查员screencap

在角度cli dev环境中,我在名为layout-grid.component.html的文件中创建了一个带有单个图块的网格列表组件:

<md-grid-list cols="4" rowHeight="100px">
  <md-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    <app-splash></app-splash>
  </md-grid-tile>
</md-grid-list>
Run Code Online (Sandbox Code Playgroud)

网格图块中嵌入了一个名为app-splash的组件,其中包含一个图像:

<img src="../assets/horse.jpg" alt="Horse">
Run Code Online (Sandbox Code Playgroud)

当我运行Web应用程序时,我在图块中间看到图像,但边缘周围有间隙.我希望img填充瓷砖.在Chrome中使用检查器,我发现匪徒是隐藏的类:

.mat-grid-tile .mat-figure {
  align-items:center;
  bottom:0;
  display:flex;
  height:100%;
  justify-content:center;
  left:0;
  margin:0;
  padding:0;
  position:absolute;
  right:0;
  top:0;
}
Run Code Online (Sandbox Code Playgroud)

如果我关闭显示:flex属性我得到我需要的结果.如何在我的代码中将其关闭?将网格列表组件的css设置为内联不会做任何事情.我需要更改打字稿吗?layout-grid.component.ts如下:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-layout-grid',
  templateUrl: './layout-grid.component.html',
  styleUrls: ['./layout-grid.component.css']
})
export class LayoutGridComponent implements OnInit {

  tiles = [
    {text: 'One', cols: 4, rows: 10, color: 'lightblue'},
  ];

  constructor() { }

  ngOnInit() {
  }
Run Code Online (Sandbox Code Playgroud)

css flexbox angular-material angular

5
推荐指数
1
解决办法
1944
查看次数

Angular 4路由

人们可以停止建议使用angular-4路由标记此帖子吗?我知道那个标签.然而,我的问题与Angular 4的路由无关 - 这是一个错误的问题因为我不明白当时发生了什么.这里的解决方案不会帮助那些希望获得实际Angular 4路由帮助的人,所以我不同意它应该被标记为这样,我将继续拒绝这种改动.我重申:尝试使用标准托管包启动一个有角度的网络应用程序是错误的,而没有先了解PHP,nodejs,dist文件夹和其他一些东西.我看到很多人犯了类似的错误,但是他们需要知道这不是路由问题,而是一个不知道关于网站的问题,他们应该像我一样做,然后扣下来学习东西.

我的角度4路由不起作用.

  • Angular 4路由与Angular 2不同.请只能遇到类似问题的人使用Angular 4评论.似乎有很多变化,我按照2017年的指导方针设置了我的路线.将旧解决方案标记为此只会让人感到困惑和无益 - 特别是因为我是Angular的新手并且只有4的经验.我不想使用HashLocationStrategy*

我可以导航到我的域,然后使用我的菜单组件在页面之间导航,但是当我输入mydomain/home时,我看到一个空白页面.看起来其他人问过有关Angular早期版本的类似问题,但我看不到任何人有更新的设置.

我有

import { routes } from './app.router';
Run Code Online (Sandbox Code Playgroud)

在app.module.ts中

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';

export const router: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent },
    { path: …
Run Code Online (Sandbox Code Playgroud)

routing typescript angular

5
推荐指数
1
解决办法
2938
查看次数

反应 pdf 下载空白

我正在使用 React hooks 和 react-pdf 中的react-pdf

我尝试了 3 种不同的 React pdf 转换器,这是迄今为止效果最好的一种。它仍然不能很好地工作 - 我不知道如何使它不耗尽内存或生成空白的 pdf。

我有一个生成 pdf 的组件:

import React from 'react';
import { Page, Text, View, Document, StyleSheet, Font } from '@react-pdf/renderer';

Font.register({
    family: 'Roboto',
    src: 'https://fonts.googleapis.com/css?family=Roboto+Mono:100i,300,300i,400,400i,500,500i,700,700i&display=swap'
  });

// Create styles
const styles = StyleSheet.create({
  page: { 
    backgroundColor: '#F5F8FA',
    display: 'flex',
    // flexDirection: 'column',
    // alignItems: 'flex-start',
    marginTop: 40,
    marginLeft: 20,
    marginRight: 20,
    width: 555
  },
  section: {
    margin: 50,
    padding: 50,
  },
  reportHeader: {
    marginLeft: 0,
    fontStyle: …
Run Code Online (Sandbox Code Playgroud)

pdf reactjs react-pdf

5
推荐指数
1
解决办法
3114
查看次数

.htaccess重定向不使用Angular 4

我知道很多人都会问这个问题,但我看了所有答案,但没有任何工作.

我确定问题是我需要创建一个.htaccess文件并将其添加到我的dist中,因为这是ISP控制台指南所说的.

我正在使用Angular cli和build命令:

ng build --aot --prod --base-href ./
Run Code Online (Sandbox Code Playgroud)

我已将此.htaccess文件添加到我的app文件夹 - 与index.html文件相同的文件夹.这是.htaccess代码:

RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]

    RewriteRule ^(.*) /index.html [NC,L]
Run Code Online (Sandbox Code Playgroud)

我在SO上尝试了各种不同答案的各种片段,我尝试了angular.io指南上的片段,我尝试更改base-href.似乎什么都没有用,我甚至无法确定它是否正在构建中正确添加到我的dist中.我能做什么?

apache .htaccess redirect angular

4
推荐指数
1
解决办法
6402
查看次数