import {Pipe, PipeTransform} from '#angular/core';
import {Product} from "./product";
#Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(value: Product[], filterText?: string): Product[] {
filterText = filterText?filterText.toLocaleLowerCase(): null
return filterText ? value.filter((p: Product) => p.name
.toLocaleLowerCase().indexOf(filterText) !== -1) : value;
}
}
TS2322: Type 'string | null' is not assignable to type 'string | undefined'.Type 'null' is not assignable to type 'string | undefined'.
and
TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.Type 'undefined' is not assignable to type 'string'.
enter image description here
Try with this
import {Pipe, PipeTransform} from '#angular/core';
import {Product} from "./product";
#Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(value: Product[], filterText?: string): Product[] {
let pattern = filterText ? filterText.toLocaleLowerCase(): null;
return pattern ? value.filter((p: Product) => p.name.toLocaleLowerCase().indexOf(pattern) !== -1) : value;
}
}
If a filterText is not passed to the function then you got that error because you are trying to assign something to undefined.
Related
I'm trying to dynamically import an icon from react-icons following the this Nextjs instructions but I get an error.
This is my code:
import React, { Suspense } from 'react';
import dynamic from 'next/dynamic';
interface IconProps {
name: string;
}
function Icon({ name }: IconProps) {
const MyIcon = dynamic(() => import('react-icons/fi/index.js').then((mod) => mod[name]), {suspense: true});
return (
<Suspense fallback={`Loading...`}>
<MyIcon />
</Suspense>
);
}
export default Icon
This is the error:
Argument of type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
Type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to type '() => LoaderComponent<{}>'.
Type 'Promise<IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to type 'LoaderComponent<{}>'.
Type 'IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
Types of parameters 'nextProps' and 'nextProps' are incompatible.
Type 'Readonly<{}>' is not assignable to type 'never'.ts(2345)
What am I doing wrong?
I am getting the following error. I have been trying to resolve this issue for sometime now but with no luck. Can someone please help me out.
Type 'Student' is not assignable to type 'any[] | Iterable |
(Iterable & any[]) | (any[] & Iterable)'. Type 'Student' is
not assignable to type 'any[] & Iterable'. Type 'Student' is not
assignable to type 'any[]'.
The Code can be found here.
app.component.html
<div *ngFor="let stu of studentSelected; let i = index;">
<tr>
<td>{{stu.f}} :</td>
<ng-container *ngFor="let s of stu.ff">
<td>{{s.s_name}}</td>
</ng-container>
</tr>
</div>
app.component.ts
import { Component, VERSION } from '#angular/core';
import { Student } from './student.model';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
studentSelected: Student | any = {
f: 'dfd',
ff: [
{
s_name: 'nswq'
}
]
};
}
School.model.ts
export class School {
s_name: string;
constructor(s_name: string = '') {
this.s_name = s_name;
}
}
student.model.ts
import { School } from './School.model';
export class Student {
f: string;
ff: School[];
constructor(f: string = '', ff: [] = []) {
this.f = f;
this.ff = ff;
}
}
As mentioned in comment, selectedStudent is an object, so remove the outer ngFor. Also, remove all any from the code. There is no use to code with TypeScript if you are going to use any. So, remove any and just declare the variable as a type of Student:
studentSelected: Student = {
f: 'dfd',
ff: [
{
s_name: 'nswq'
}
]
};
I see you are using classes with constructor. Please note that how you are declaring your studentSelected will NOT be an instance of your class. I like to use interfaces, unless there is a specific reason needed to have a class, like class specific methods. You don't seem to have that, so I suggest you just use interfaces:
export interface School {
s_name: string;
}
export interface Student {
f: string;
ff: School[];
}
If you want to have your data as classes though, remember when creating an instance of your class, you need to call new Student({.....})
As for the template... as earlier said, remove the outer *ngFor from template:
<tr>
<td>{{studentSelected.f}} :</td>
<ng-container *ngFor="let s of studentSelected.ff">
<td>{{s.s_name}}</td>
</ng-container>
</tr>
Your StackBlitz
I want to create a table with table material i was watching a tutorial about connecting material table to firebase but i got a error that i didn't understand
The error message upon connect:
Property 'connect' in type 'chauffeurDataSource' is not assignable to the same property in base type 'DataSource<any>'.
Type '() => void' is not assignable to type '(collectionViewer: CollectionViewer) => Observable<any[] | readonly any[]>'.
Type 'void' is not assignable to type 'Observable<any[] | readonly any[]>'.
This is my code, in landing.componnet.ts:
import { Component, OnInit } from "#angular/core";
import { CollectionViewer, DataSource } from '#angular/cdk/collections'
import {AngularFirestore} from "#angular/fire/firestore";
import {chauffeurs} from '../../shared/models/chauffeur'
import { chauffeurService } from "src/app/shared/service/ChaufffeurService";
import { Observable } from "rxjs-compat";
#Component({
selector: "app-landing",
templateUrl: "./landing.component.html",
})
export class LandingComponent implements OnInit {
displayedColumns = ['nometprenom', 'Active', 'Nombre de lot', 'Montant total du lot', 'Nombre de colies livrée','Sommes livrées','Sommes livrée','Somme dues'];
dataSource =new chauffeurDataSource(this.chauffeur.getchauffeur())
constructor(private chauffeur:chauffeurService) {}
ngOnInit(): void {}
}
export class chauffeurDataSource extends DataSource<any> {
connect() {
return this.chauffeur.getchauffeur();
}
disconnect(collectionViewer: CollectionViewer): void {
throw new Error("Method not implemented.");
}
constructor(private chauffeur: chauffeurService){
super()
}
}
I'm trying to create a BaseModel from which all my models are inherited.
I'm also trying to create a separate method() function that can get any of my models as argument.
This is my example code:
import {
Model, Optional
} from 'sequelize'; // v6.3.5
interface DefaultAttributes {
id: number;
}
interface TestAttributes extends DefaultAttributes {
field: number;
}
class BaseModel<T extends DefaultAttributes> extends Model<T, Optional<T, 'id'>> {
static test() {
}
}
class MyModel extends BaseModel<TestAttributes> {
}
function method<T extends typeof BaseModel>(model: T) {
model.test();
}
method(MyModel) // <<<<<< TypeScript ERROR
I've tried to do everything just as the documentation described. https://sequelize.org/master/manual/typescript.html
I'm getting the following TypeScript error:
TS2345: Argument of type 'typeof MyModel' is not assignable to parameter of type 'typeof BaseModel'. Types of parameters 'values' and 'values' are incompatible. Type 'Optional<T, "id">' is not assignable to type 'Optional<TestAttributes, "id">'. Property 'field' is missing in type 'Optional<T, "id">' but required in type 'Pick<TestAttributes, "field">'.
Can pls someone help me what did I do wrong, or how can I create a method that can receive any UniqueModel inherited from BaseModel?
Try this:
import {
Model, Optional
} from 'sequelize'; // v6.3.5
interface DefaultAttributes {
id: number;
}
interface TestAttributes extends DefaultAttributes {
field: number;
}
class BaseModel<T extends DefaultAttributes> extends Model<T, Optional<T, 'id'>> {
static test() {
}
}
class MyModel extends BaseModel<TestAttributes> {
}
function method<T extends BaseModel>(model: T) {
model.test();
}
method(MyModel)
this error happen with Asp.net core 2 and angular 4 after running the application in seconds
angular CLI:
Angular CLI: 1.7.0
Node: 6.11.3
OS: win32 x64
Angular: 4.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped
#angular/cli: 1.7.0
#angular-devkit/build-optimizer: 0.3.1
#angular-devkit/core: 0.3.1
#angular-devkit/schematics: 0.3.1
#ngtools/json-schema: 1.2.0
#ngtools/webpack: 1.5.0
#schematics/angular: 0.3.1
#schematics/package-update: 0.3.1
typescript: 2.3.4
webpack-hot-middleware: 2.18.2`enter code here`
webpack-merge: 4.1.0
webpack: 2.5.1
app.shared.module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { VehicleFormComponent } from './components/vehicle-form/vehicle-form.component';
#NgModule({
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
VehicleFormComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'vehicles/new', component: VehicleFormComponent },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}
ouput error :
ERROR in [at-loader] ./ClientApp/app/components/app/app.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/counter/counter.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/fetchdata/fetchdata.component.ts:4:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/home/home.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/navmenu/navmenu.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/vehicle-form/vehicle-form.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
error image: