角度材质 Flex-layout 当将 fxFlex 与 mat-form-field 一起使用时，该元素不会出现在 I

Question

我正在使用Angular 6与Material 6和flex-layout 6-beta，我目前面临一个奇怪的问题，具有fxFlex属性的表单字段根本不出现在IE中，尽管它们在所有其他主要浏览器中出现并工作正常。

我已经配置了 polyfills.ts，以便该应用程序在 Internet Explorer 上运行，但我不知道如何解决此问题。

例如，考虑下面的 2 个表单字段，没有 fxFlex 的表单字段将出现在 IE 中，但另一个不会显示

对于这里的 2 个段落，两者都显示(即使是具有 fxFlex 的段落(，似乎问题专门存在于(fxFlex、mat-form-field 和 IE(之间

<mat-form-field  fxFlex="25">
<input matInput name="dob_day" placeholder="{{'dob_day'| translate}}" [(ngModel)]="data.dob_day" pattern='(0?[1-9]|[12][0-9]|3[01])'
maxlength="2" required>
</mat-form-field>
<mat-form-field  >
<input matInput name="dob_day" placeholder="{{'dob_day'| translate}}" [(ngModel)]="data.dob_day" pattern='(0?[1-9]|[12][0-9]|3[01])'
maxlength="2" required>
</mat-form-field>
<p fxFlex="25" >hello , how are you?</p>
<p>hello , how are you?</p>

我目前的 polyfills.ts：

/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// (window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
* APPLICATION IMPORTS
*/

任何帮助，不胜感激。

Answer 1

我发现为了使IE11能够与mat-form-field正常工作，您需要将表单字段包装在div标签中。 无需向此div 标签添加任何属性。

为了在IE 11中实现此表单布局... IE 11 表单布局...

这是我使用的代码：

<div flLayout="column" fxLayoutGap="7px" fxLayoutGap.xs="0px">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="7px" fxLayoutGap.sm="0px">
<mat-form-field fxFlex appearance="outline">
<mat-label>First Name</mat-label>
<input matInput formControlName="firstName">
</mat-form-field>
<mat-form-field fxFlex appearance="outline">
<mat-label>Last Name</mat-label>
<input matInput formControlName="lastName">
</mat-form-field>
</div>
<div>
<mat-form-field fxFlex appearance="outline">
<mat-label>Title</mat-label>
<input matInput placeholder="Title" formControlName="title">
</mat-form-field>
</div>
</div>

请注意"标题"表单字段周围的div 标记。

通过此添加，IE 11 表现良好，对其他浏览器的渲染没有影响。