小编לבנ*_*לכה的帖子

我用Angular CLI创建了一个角度项目:1.6.3节点:9.4.0 OS:linux x64版本.但是当想要使用命令ng serve运行我的角度应用程序时,则获取此错误

找不到模块'@ angular-devkit/core'.

我正在尝试使用此页面上显示的Angular架构. 当我尝试在项目根目录的终端中使用以下命令时,生成@ angular/material:material-nav --name name-of-new-nav,我得到以下错误为红色,

收集"@ angular/material"无法解析.错误:无法解析集合"@ angular/material".在NodeModulesEngineHost的NodeModulesEngineHost._resolveCollectionPath(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:88:15). SchematicEngine._createCollectionDescription中的createCollectionDescription(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:106:27) (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:78:40)在SchematicEngine.createCollection(/ Users/jeremypeters/MEGA) /development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:71:43)在Object.getCollection(/ Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/utilities/schematics.js:28:31)GenerateCommand.getOptions(/ Users/jeremypeters/MEGA/development/learning/angul)在GenerateCommand的ar /material-learn/node_modules/@angular/cli/models/schematic-command.js:193:41).(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:38:53)位于/ Users/jeremypeters/MEGA/development的Generator.next() /learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:7:71在新的Promise()

我如何让它工作？

信息:Angular CLI:6.0.8

我正在使用 mat-icon，在某些浏览器上，mat-icon 显示文本而不是实际图标，或者它可以显示文本，直到导入图标。我尝试导入：

@import 'https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/prebuilt-themes/indigo-pink.css';

到我的 style.css 但它没有解决问题。有没有办法阻止在图标加载之前显示文本，甚至根本不显示文本？

import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDialogModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatOptionModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatStepperModule,
  MatTabsModule,
  MatToolbarModule,
  MatFormFieldModule,
  MatAutocompleteModule
} from '@angular/material';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { UniquePipe } from './pipes/unique/unique.pipe';
import { ConfirmCountryComponent } from './dialogs/confirm-country/confirm-country.component';
import { AutocompleteComponent } from './components/autocomplete/autocomplete.component';
import { ConfirmCountryService } from './dialogs/confirm-country/confirm-country.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common'; …

是否可以将 css calc 运算的结果转换为 rem 单位？

我正在尝试进行此操作：calc((100% - 2.3rem)/2)并且我需要结果以 rem 为单位。

我正在显示带有省略号的文本。在我当前的CSS中，省略号表示断字。

我需要在单词补全后显示省略号以确保适当的可读性。

以下是我的CSS

.myContainer {
  text-overflow: ellipsis;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 15px;
}

<div class="myContainer">
  Testing the dataset in path oregon location should done
</div>

我不想更改容器的宽度。单词位置未显示。

省略号应在位置字后显示（完整）

我想塑造如下:

我到目前为止尝试了但是如何将它们混合在一起:

.clal-loader{
  display:flex;
}
.clal-loader div{
  border: 10px solid #38477e;
  border-left: 0;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  width: 30px;
  height: 30px;
}
.clal-loader div:nth-child(1){
   border-color:#0cabec;
}

.clal-loader div:nth-child(2){
 transform: rotate(-180deg);
     position: absolute;
    left: 25px;
    z-index: -1;
}

<div class="clal-loader">
  <div></div>
  <div></div>
</div>

目前我正在使用他们网站上的引导程序导航栏示例。我正在尝试使用自定义 css 来更改如下所示的图标。

.navbar-toggler-icon {
    background-image: "resources/images/bars.svg" !important;
}

这是 bootstrap 中的导航栏代码，按预期工作。

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div> …

我正在设计我的登录页面。我添加了按钮背景色，该背景色完美地显示在chrome和firefox上，但是在Microsoft Edge上却不显示。以下是我的HTML和CSS，请注意-我尝试了多种颜色，所有颜色都在chrome和firefox上运行，但不在边缘

的HTML

         .index-un-right-nav-buttom{
                float: left;
                height: auto;
                padding-top: 10px;
                padding-bottom: 10px;
                width: 100%;
            }
                .index-un-right-nav-submit-button{
                    float: left;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    height: 50px;
                    width: 100px;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    margin-left: 10%;
                    border: none;
                    outline: none;
                    color: #ffffff;
                    background-color: #007182fb;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 18px;
                    border-radius: 50px;
                }

<span class="index-un-right-nav-button">
    <button class="index-un-right-nav-submit-button">Login</button>
</span>

       

在Firefox中，

在边缘

在镀铬中

我是 Angular 6 的新手。我知道这可能很愚蠢，但我没有得到任何解决方案。单击文本字段中的浏览图像时，我想打开文件对话框。这是我尝试过的。

<div class="boxed">
  <div class="input-group">
      <input id="spFile" class="form-control" name="spFile">
    <img src="../../../../../assets/images/maps/Browse.png" type= "file" width="40" height="40" style=" position: absolute; top: 1px; right: 1px" aria-hidden="true"/>
  </div>
</div>

我怎样才能让这个轻松打开一个文件对话框？

我想根据一些 json 值设置数据表的各个行的样式。

例如，如果特定行的温度值 >30，我必须将该行着色为红色。如果在 30 到 50 之间，则颜色应为绿色。否则颜色应该是绿色的。

截至目前，我只能使用以下方法定位偶数行或奇数行：

tr:nth-child(even)/tr:nth-child(odd).