小编use*_*622的帖子

我正在尝试根据页面 URL 更改容器的背景颜色，因此如果用户导航到 URL，'/movie'它应该将背景更改为红色，否则它应该将背景设置为绿色

这是我的 index.js

import React from 'react';
import { BrowserRouter, Switch, Route, useLocation} from 'react-router-dom';

import styled from 'styled-components';
import Movies from 'pages/Movies/Movies'
import Templates from 'pages/Movies/Templates'
;

export default () => {
    
    const location = useLocation();

    return (
        <>
            <BrowserRouter>
                <Container style={{backgroundColor:location.pathname === '/movies' ? 'red' : 'green'}}>
                    <Main>
                        <App>
                            <Switch>
                                <Route path='/templates' component={Templates} />
                                <Route path='/movies'  component={Movies} />
                            
                            </Switch>
                        </App>
                    </Main>
                </Container>
            </BrowserRouter>
        </>
    );
}

const Container = styled.div`
    min-height: 100vh;
    
`; …

我在角度6应用程序中有简单的导航,

这是HTML

<nav class="main-nav>
<ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
            <li class="main-nav__item">
              <a class="main-nav__link" routerLink="['/']" routerLinkActive="active">Home</a>
            </li>
            <li class="main-nav__item"> 
              <a class="main-nav__link" routerLink="['/about']" routerLinkActive="active">About us</a>
            </li>

          </ul>
</nav>

这是app.routing模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from …

我有一个数据表,显示来自外部API的数据,我希望表页面上的items/element数量应该保存在本地存储中

这是我到目前为止所尝试的:

 ngOnInit() {
  this.moviesService.getPopularTVShows().subscribe(res => {
    this.dataSource = new MatTableDataSource(res.results);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    localStorage.setItem(this.dataSource, this.dataSource.length);
    console.log(localStorage.length);
  });
}

当我运行我的应用程序时,控制台显示 undefined

我的代码出了什么问题？欢迎任何帮助或建议,新手尝试新的东西.

我有一个简单的导航角度6应用程序,我试图使路由和子路由工作在一个简单的配置,但不幸的是我似乎无法使其工作.

这是我的应用程序的结构

????src
    ????app
    ?   ????components
    ?   ?   ????about
    ?   ?   ????clients
    ?   ?   ????footer
    ?   ?   ????how-it-wo
    ?   ?   ????partners
    ?   ?   ????projects
    ?   ?   ????team
    ?   ?   ????whatwedo
    ?   ?   ????why-choos
    ?   ????layout
    ?   ?   ????main-layo
    ?   ????shared
    ????assets
    ?   ????charts
    ?   ????css
    ?   ????fonts
    ?   ????icon
    ?   ????images
    ????environments

这是路由, app.routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import …

我正在使用表Angular材料创建一个表供参考我正在使用此示例https://material.angular.io/components/table/examples

这是我到目前为止:

HTML

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>


      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
      </ng-container>


      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>


      <ng-container matColumnDef="release">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Release</th>
        <td mat-cell *matCellDef="let row"> {{row.first_air_date}} </td>
      </ng-container>


      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.overview}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr …

我有一个简单的部分，其中显示数据库中的数据，我的数据库如下所示。

现在我有四个按钮，像这样

当用户单击以上按钮之一时，它将显示

所以现在，当用户如选择construction和未来选择，例如，Egypt' in the console and clicks button确认displays [855,599075], user can select multiple countries, this works as expected for建设,电力,oil`，

现在我想，如果用户点击如All available industries这四个按钮和下一个选择，例如按钮Egypt，点击confirm它应该显示在建筑，石油，电力行业的埃及项目总数的总和 855+337+406= 1598总预算的两个部门的总和1136173

这是我的解决方案

的HTML

<div id="interactive-layers">
    <div buttonid="43" class="video-btns">
        <span class="label">Construction</span></div>
    <div buttonid="44" class="video-btns">
        <span class="label">Power</span></div>
    <div buttonid="45" class="video-btns">
        <span class="label">Oil</span></div>
    <div buttonid="103" class="video-btns">
        <span class="label">All available industries</span>
    </div>
</div>

这是js ajax

$("#interactive-layers").on("click", ".video-btns", function(){
    if( $(e.target).find("span.label").html()=="Confirm" …

我正在学习带有钩子的reactjs表单，现在我想使用jest和enzyme测试提交时的表单。

这是我的登录组件。

import React from 'react'

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        // ....api calLS
    }
    return (
        <div>
             <form onSubmit={handleSubmit} className="login">
    
            <input type="email" id="email-input" name="email" value={email} onChange={e => setEmail(e.target.value)} />
        
            <input type="password" id="password-input" name="password" value={password} onChange={e =>setPassword(e.target.value)} />
            
            <input type="submit" value="Submit" />
             </form> 
        </div>
    )
}

export default Login

这是login.test.js 文件

 describe('my sweet test', () => {
    it('clicks it', () => {
      
       const wrapper …

我有一个bootstrap用于angular 6应用程序的电子邮件服务的表格nodejs，，我nodemailer在我的应用程序中用于sendemail，不幸的是它不起作用。提交表单时出现以下错误：

OPTIONS https://localhost:3000/contact/send 0 ()

这是表格

 <form [formGroup]="angForm" novalidate>
    <div class="message">
      <h3> Write to us </h3>
    </div>
    <div class="form__top">
      <div class="form__left">
        <div class="form__group">
          <input class="form__input form__input--name" type="text"   formControlName="name" placeholder="name" #name>
        </div>
        <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
          <div *ngIf="angForm.controls['name'].errors.required">
            Name is required.
          </div>
        </div>
        <div class="form__group">
          <input class="form__input form__input--email" type="email"  formControlName="email" placeholder="email" #email>
        </div>
        <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['message'].dirty || angForm.controls['message'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['message'].errors.required">
            message is required.
          </div>
        </div> …

我正在创建一个自定义视频播放器，我想在用户将鼠标悬停在进度栏上时添加视频预览。

我可以使用 FFmpeg 生成缩略图，如下所示。

ffmpeg -i input -filter_complex \
    "select='not(mod(n,60))',scale=240:-1,tile=layout=4x8" \
    -vframes 1 -q:v 2 outputfile.jpg

问题

要使用上面创建的精灵图像（组合缩略图），我需要生成一个WEBVTT包含缩略图和帧时间间隔的图像，如下所示。

WEBVTT

00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68

00:00:03.000 --> 00:00:06.000
thumbnails.jpg#xywh=120,0,120,68

00:00:06.000 --> 00:00:09.000
thumbnails.jpg#xywh=240,0,120,68

我无法找到任何有关如何使用 node-js 和 FFmpeg 创建此类 WEBVTT 文件的 FFmpeg 命令或教程。

也许这里有人知道这个问题的解决方案？任何帮助将不胜感激。

我正在学习更多关于角度6及其核心功能的内容,我对于应该使用角度6的文件夹结构感到困惑,我使用了不同教程的不同结构,例如traversymedia,udemy和list继续,每个人都使用不同的文件夹结构取决于项目.

这是angular docs的基本文件夹结构

这是我搜索和搜索后尝试过的内容

????src
    ????app
    ?   ????layout
    ?   ?   ????admin
    ?   ?   ?   ????breadcrumbs
    ?   ?   ?   ????title
    ?   ?   ????auth
    ?   ????pages
    ?   ?   ????animations
    ?   ?   ????authentication
    ?   ?   ?   ????forgot
    ?   ?   ?   ????lock-screen
    ?   ?   ?   ????login
    ?   ?   ?   ?   ????with-bg-image
    ?   ?   ?   ?   ????with-header-footer
    ?   ?   ?   ?   ????with-social
    ?   ?   ?   ?   ????with-social-header-footer
    ?   ?   ?   ????registration
    ?   ?   ?       ????multi-step
    ?   ?   ?       ????with-bg-image
    ?   ?   ?       ????with-header-footer
    ?   ? …