ng2マテリアライズを使用している場合、角4内のjQueryの問題

Question

https://sherweb.github.io/ng2-materialize/home < ---これはチュートリアルの場所です。

こんにちは。私はdoozieを扱っています。最悪の問題...一度働いていたが今はしない。だから私はそれが働くことができることを知っている...それはちょうど今ではない。私は角度4アプリ内でマテリアライズドCSSを使用しようとしています。この問題を本当に理解するために、詳細なチュートリアルを行う前に新しいプロジェクトを開始しました。その後、一度インストールされて一見動作して、私はuser.module.tsに選択HTMLフィールドを配置しようとします。ページは正常に読み込まれますが、selectの外側をクリックするとエラーが発生し、オプションが消えるようになります。

モジュール内にインポートが不適切に配置されているとの感想があります。アニメーションから始めて使い方までの説明から、先生が教えているモジュールがどのようなアイデアを持っているのかわかりません。私の理解はアニメーションセクションがapp.module.tsに入る必要があり、ブラウザアニメーションモジュールはマテリアライズを利用するモジュールに入る必要があるということです。

以下は、この指示を解釈する方法です。次に、それは私が選択したHTMLタグを使用しようとするときに受け取るエラーです。見てくれてありがとう！

.angular-cli.json

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "rock-radar-front" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.css", 
      "../node_modules/materialize-css/dist/css/materialize.css", 
      "../node_modules/mdi/css/materialdesignicons.min.css" 
     ], 
     "scripts": [ 
     "../node_modules/jquery/dist/jquery.js", 
     "../node_modules/materialize-css/dist/js/materialize.min.js" 
     ], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    } 
    ], 
    "e2e": { 
    "protractor": { 
     "config": "./protractor.conf.js" 
    } 
    }, 
    "lint": [ 
    { 
     "project": "src/tsconfig.app.json" 
    }, 
    { 
    "project": "src/tsconfig.spec.json" 
    }, 
    { 
     "project": "e2e/tsconfig.e2e.json" 
    } 
    ], 
    "test": { 
    "karma": { 
     "config": "./karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "styleExt": "css", 
    "component": {} 
    } 
} 

のTSconfig

{ 
    "extends": "../tsconfig.json", 
    "compilerOptions": { 
    "outDir": "../out-tsc/app", 
    "baseUrl": "./", 
    "module": "es2015", 
    "types": [ 
     "jquery", 
     "materialize-css" 
    ] 
    }, 
    "exclude": [ 
    "test.ts", 
    "**/*.spec.ts" 
    ] 
} 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { AppComponent } from './app.component'; 
import { UserComponent } from './user/user.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    UserComponent 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule 
], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

user.module.ts（ユーザモジュールは、アプリケーションフォルダ内のユーザー・コンポーネントである）

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { MaterializeModule } from 'ng2-materialize'; 
import { UserComponent } from "./user.component"; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    MaterializeModule 
    ], 
    declarations: [UserComponent] 
}) 
export class UserModule { } 

は、最後に聞いて、私は取得していますエラーです。私が輸入品を移動すると、私は違うエラーが出ることがありますが、現状では輸入品を認識することさえできないと私は思っています。私がどこに行っているのか分かりましたら教えてください！ありがとう

compiler.es5.js:1690 Uncaught Error: Template parse errors: 
Can't bind to 'label' since it isn't a known property of 'select'. (" 
    <select multiple mz-select 
    id="options-select" 
    [ERROR ->][label]="'Label'" 
    [placeholder]="'Placeholder'" 
    > 
"): ng:///AppModule/UserComponent.html@3:4 
Can't bind to 'placeholder' since it isn't a known property of 'select'. (" 
    id="options-select" 
    [label]="'Label'" 
    [ERROR ->][placeholder]="'Placeholder'" 
    > 
    <optgroup label="Group 1"> 
"): ng:///AppModule/UserComponent.html@4:4 
'mz-select-container' is not a known element: 
1. If 'mz-select-container' is an Angular component, then verify that it is part of this module. 
2. If 'mz-select-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mz-select-container> 
    <select multiple mz-select 
    id="options-select" 
"): ng:///AppModule/UserComponent.html@0:0 
     at syntaxError (http://localhost:4200/vendor.bundle.js:24056:34) 
    at 
    TemplateParser.webpackJsonp.../../../compiler 
/@angular/compiler.es5.js.TemplateParser.parse 
(http://localhost:4200/vendor.bundle.js:35176:19) 
    at JitCompiler.webpackJsonp.../../../compiler/@ 
angular/compiler.es5.js.JitCompiler._compileTemplate 
(http://localhost:4200/vendor.bundle.js:49328:39) 
    at http://localhost:4200/vendor.bundle.js:49248:62 
    at Set.forEach (native) 
    at 
    JitCompiler.webpackJsonp.../../../compiler/ 
    @angular/compiler.es5.js.JitCompiler._compileComponents 
(http://localhost:4200/vendor.bundle.js:49248:19) 
    at http://localhost:4200/vendor.bundle.js:49135:19 
    at Object.then (http://localhost:4200/vendor.bundle.js:24045:156) 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler. 
es5.js.JitCompiler._compileModuleAndComponents 
(http://localhost:4200/vendor.bundle.js:49134:26) 
    at 
JitCompiler.webpackJsonp.../../../compiler/@angular/ 
compiler.es5.js.JitCompiler.compileModuleAsync 
(http://localhost:4200/vendor.bundle.js:49063:37) 

Answer 1

この問題は、私がChromeで持っていたWeb拡張機能のためです。私はそれが問題であることが判明したときには嫌いです....ごめんなさい。