data.nav = $el.children(data.sliderNavClass ? data.sliderNavClass: '.w-slider-nav');data.nav.empty().append(dots);<div class="slider-line"></div>, для того, чтобы скрыть точки, которые не вмещаются в размер блока. И при пролистывании слайдера эти точки тоже будут листаться. Но пока не выходит.var sliderLineTest = document.querySelector('.slider-line')
data.nav.append(slider-line);let index = -1;
setInterval((el) => {
const show = !modalWindow.classList.contains('_active'); // true/ false
index = (index + show) % infoModal.length;
el.innerText = infoModal[index].title;
modalWindow.classList.toggle('_active', show);
}, 5000, document.querySelector('.modal__title'));Надо бы разделить, например с помощью resourceQuery: '?sprite'- если верно понимаю:
{
test: /\.(jpe?g|png|webp|gif|svg)$/i,
resourceQuery: '',
use: [
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
],
type: 'asset/resource',
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
resourceQuery: '?sprite',
options: {
extract : true ,
publicPath : '/assets/'
}
}
. svg создается с другой структурой 
а лучше - генери через https://www.npmjs.com/package/webpack5-svg-sprite- установлен:
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
plugins: [
new SpriteLoaderPlugin()
],
.......
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract : true ,
publicPath : '/'
}
}
<svg display="none" xmlns="http://www.w3.org/2000/svg">
<symbol id="search" viewBox="0 0 512.005 512.005">
<path d="M505.749 475.587l-145.6-145.6c28.203-34.837 45.184-79.104 45.184-127.317C405.333 90.926 314.41.003 202.666.003S0 90.925 0 202.669s90.923 202.667 202.667 202.667c48.213 0 92.48-16.981 127.317-45.184l145.6 145.6c4.16 4.16 9.621 6.251 15.083 6.251s10.923-2.091 15.083-6.251c8.341-8.341 8.341-21.824-.001-30.165zM202.667 362.669c-88.235 0-160-71.765-160-160s71.765-160 160-160 160 71.765 160 160-71.766 160-160 160z"/>
</symbol>
</svg>
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const mode = process.env.NODE_ENV || 'development';
const devMode = mode === 'development';
const target = devMode ? 'web' : 'browserslist';
const devtool = devMode ? 'source-map' : undefined;
module.exports = {
mode,
target,
devtool,
devServer: {
port: 3000,
open: true,
hot: true,
},
entry: ["@babel/polyfill", path.resolve(__dirname, 'src', 'index.js')],
output: {
path: path.resolve(__dirname, 'dist'),
clean: true,
filename: '[name].[contenthash].js',
assetModuleFilename: 'assets/[name][ext]'
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html')
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
})
],
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.(c|sa|sc)ss$/i,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [require('postcss-preset-env')],
}
}
},
'sass-loader',
],
},
{
test: /\.woff2?$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]'
}
},
{
test: /\.(jpe?g|png|webp|gif|svg)$/i,
use: [
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
],
type: 'asset/resource',
},
{
test: /\.m?js$/i,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
]
}
}dataSource = (new MatTableDataSource([])) as any- кажется удалось решить проблему c помощью Вашей помощи )
<table cdk-table [dataSource]="dataSource">
<!-- цвет приоритета -->
<ng-container cdkColumnDef="color">
<th cdk-header-cell *cdkHeaderCellDef>111111111</th>
<td cdk-cell *cdkCellDef="let task" [style.background-color]="getPriorityColor(task)"></td>
</ng-container>
//остальные колонки
</table>export class TasksComponent implements OnInit {
public displayedColumns: string[] = ['color', 'id', 'title', 'date', 'priority', 'category'];
public dataSource: MatTableDataSource<Task> = new MatTableDataSource<Task>()
tasks?: Task[]
constructor(private dataHandler: DataHandlerService) {
}
ngOnInit() {
this.dataHandler.tasksSubject.subscribe(tasks => this.tasks = tasks)
this.dataSource = new MatTableDataSource<Task>(this.tasks)
this.refreshTable()
}
toggleClickCompleted(task: Task) {
task.completed = !task.completed
}
getPriorityColor(task: Task) {
if (task.priority && task.priority.color) {
return task.priority.color
}
return '#fff'
}
private refreshTable() {
}
}Ваш компилятор ts, видимо настроен более строже.- может есть возможность скорректировать настройки?
dataSource = (new MatTableDataSource([])) as any- так ошибки нет, выводится только шапка таблицы(
<cdk-table [dataSource]="dataSource">)<table _ngcontent-adt-c134="" cdk-table="" class="cdk-table" role="table" ng-reflect-data-source="[object Object]">dataSource = ((new MatTableDataSource([])) as any) as CdkTableDataSourceInput- так "Cannot find name 'CdkTableDataSourceInput'". С помощью IDE можно создать класс/интерфейс
Вам нужно зайти в компонент table- кажется я запуталась ) Не в компоненте tasks?
public dataSource?: MatTableDataSource<Task> = new MatTableDataSource<Task>([]) //первый вариантpublic dataSource?: MatTableDataSource<Task> //второй вариант<cdk-table [dataSource]="dataSource"><table>, но dataSource: MatTableDataSource<Task> = new MatTableDataSource<Task>([])Я вижу в документации, что если использовать просто тег table, то должен использоваться атрибут cdk- подскажите, пожалуйста, где указано в документации? Не исключено, что не там смотрю. В версиях 13 и 12 в качестве примеров указаны с тегами table
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> //12 версия, у меня 12
<table cdk-table [dataSource]="dataSource"> //13 версия<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
</table>static tasks: Task[] = [
{
id: 1,
title: 'Залить бензин полный бак',
priority: TestData.priorities[2],
completed: false,
category: TestData.categories[9],
date: new Date('2019-04-10')
},
{
id: 2,
title: 'Передать отчеты начальнику управления',
priority: TestData.priorities[0],
completed: false,
category: TestData.categories[0],
date: new Date('2019-04-11')
}
]function telephoneCheck(str) {
let regExp = /^(?:\d{3}-\d{3}-\d{4}|(?:1 )?\d{3} \d{3} \d{4}|\(\d{3}\) ?\d{3}-\d{4}|\d{10})$/
return regExp.test(str)
}
telephoneCheck("1 555-555-5555")при помощи регулярки невозможно проверить парность скобок- спасибо за информацию, теперь буду знать, что невозможно проверить на парность скобок.
Эту задачу действительно необходимо решить при помощи одной регулярки?- задачу нужно решить, не обязательно с помощью регулярки, но это первое, что пришло на ум.