小编Fai*_*sal的帖子

我正在使用Angular 4和Angular Material 2.对于以下代码:

<form>
  <md-form-field>
    <input mdInput [ngModel]="userName" placeholder="User" [formControl]="usernameFormControl">
    <md-error *ngIf="usernameFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <input mdInput [ngModel]="password" placeholder="Password" [formControl]="passwordFormControl">
    <md-error *ngIf="passwordFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <button md-raised-button color="primary" [disabled]="!usernameFormControl.valid || !passwordFormControl.valid">Login</button>
  </md-form-field>
</form>

我收到一个错误:

模板解析错误:'md-form-field'不是已知元素:1.如果'md-form-field'是Angular组件,则验证它是否是此模块的一部分.2.如果'md-form-field'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[错误 - >]

你能不能帮我解决我失踪的地方？

以下是我app.module.ts导入材料模块的代码:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent …

我正在使用角度材料对话框2.

我想将数据传递给打开的组件.这是我点击按钮时打开对话框的方式

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
            data :{'name':'Sunil'}
        });

在文档页面上有data属性,但是我在已安装的软件包中检查了MdDialogConfig

/**
 * Configuration for opening a modal dialog with the MdDialog service.
 */
export declare class MdDialogConfig {
    viewContainerRef?: ViewContainerRef;
    /** The ARIA role of the dialog element. */
    role?: DialogRole;
    /** Whether the user can use escape or clicking outside to close a modal. */
    disableClose?: boolean;
    /** Width of the dialog. */
    width?: string;
    /** Height of the dialog. */
    height?: string;
    /** …

我想在使用md-select选择值时在typescript中调用函数.在材料设计中用于此目的的属性是什么？

   <md-select placeholder="State">
       <md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}
   </md-option>

我准备在我的电脑屏幕上握拳.我有一个对话框,拒绝让我在屏幕底部的提交按钮上面一个热点 - 我希望它在最顶层.

我已经确定我的主题正在加载.这在此验证:

我试过了:

this.dialogBox.open(thankYouModal, {position: {top: '0%', left: '20%'}});

我已尝试过顶部的负数和正数.我得到的最好的是我可以进一步向下移动模态,因此用户必须向下滚动才能关闭它.但是,那个吸盘不会让头发超过提交按钮

我试图将样式表放入组件中,其中包含以下内容:

div#cdk-overlay-0.cdk-overlay-container{
    position: fixed !important;
    left: 20%;
    top: 0%;
    background-color: white;
    pointer-events: auto;
}

我无法让这个东西在提交按钮上方一英寸处.如果他们帮助我弄清楚我做错了什么,我会给别人生一个孩子.

(是的,我知道我是戏剧性的,但我已经和它一起战斗并在网上搜索了3个小时;我是一个失败的人......)

编辑

这是thankYouModalComponent代码:

import {Component} from "@angular/core";
import {MdDialogRef, MdDialogConfig} from "@angular/material";

@Component({
             selector: 'thank-you-modal',
             template: `
                                <h3>Thank You for Your Submission</h3>
                                <p>Your Feedback has been Saved.</p>
                                <button md-raised-button (click)="dialogRef.close()">Close</button>

                        `,
            styles: [`
                        .md-dialog-container {
                                            position: fixed !important;
                                            left: 20%;
                                            top: 0%;
                                            background-color: white;
                                            z-index: 100000;
                    }`]
})

export class ThankYouComponent{
    constructor(public dialogRef: …

是否可以在步进器内重置(或只是跳到第一步)？文档中没有记录,但是可以这样做吗？在文档中声明步进器是建立在"CDK Stepper"(链接？)上的,但我找不到任何能够引导我实现目标的例子.

所以我一直在尝试在我的Web应用程序开发中采用Materials Accordion.

然而,随着内容的增长,使标题扩大的麻烦有些麻烦.

我的标题预计将有相当多的行来提供摘要,而不仅仅是1个班轮.

如果我硬编码材质标题高度,它会导致动画干扰.

下面是一个示例代码

<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">
                <mat-expansion-panel #panel1 [hideToggle]="hideToggle">
                    <mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
                    <p>This is the content text that makes sense here.</p>
                </mat-expansion-panel>
            </mat-accordion>

::ng-deep .mat-expansion-panel-header
{
    height: 190px !important;
}

如果我执行上述操作,则会设置高度,但展开和折叠的动画会很奇怪.

我该怎么办呢？

我正在使用Angular Material,我正在使用md-dialog为我的画廊添加弹出窗口.默认动画和样式看起来不错.但是,我想改变尺寸的宽度和高度md-dialog-container？这是隐藏的.仅在我单击模态时添加,当您打开chrome dev工具时,您可以看到md-dialog-container显示的内容.包括如何覆盖其余样式.

非常感谢一些帮助.谢谢.

多个自动完成在同一页面中,角度为4的不同来源与角度材质:

来源:https://material.angular.io/components/autocomplete/examples

我已经按照材料自动完成示例并尝试在同一页面中添加一个自动完成,但源不同但不起作用.

formcontrol正在创造问题吗？

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
})
export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  testCtrl: FormControl;
  filteredStates: any;
  filterTests:any;
tests = [
    'Nawab',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California'];
  states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New …

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

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

.mat-dialog-container {
    margin: 0px;
    padding: 0px;
}

在AngularJS中,可以使用选择器在CSS中设置工具提示的样式 .md-tooltip

在Angular 4中使用自定义格式工具提示的方法是什么？

编辑:

我正在使用Angular 4和Material2.

我如何使用它的一个例子是:

<span mdTooltip='TEST' mdTooltipPosition='right'>TEST</span>

它显示工具提示非常好,除了我不知道如何设计它的事实.