Fatal编程技术网
  • typescript/
  • Typescript G振动模块显示异常和星号角8.1.2

Typescript G振动模块显示异常和星号角8.1.2

typescript

Typescript G振动模块显示异常和星号角8.1.2,typescript,angular8,ng-bootstrap,Typescript,Angular8,Ng Bootstrap,我正在使用@ng bootstrap/ng bootstrap中的NgbRating模块，我已经看到了它的实现，并且已经实现了。实施后出现如下异常： 每个星星之间的这些（*）都表明我不想要。这是我的HTML文件代码： <div id="about" *ngFor="let Review of Reviews" class="p-24" fxLayout="row wrap"> <mat-card style="padding-bottom: 60px;

我正在使用
@ng bootstrap/ng bootstrap
中的
NgbRating
模块，我已经看到了它的实现，并且已经实现了。实施后出现如下异常：

每个星星之间的这些
（*）
都表明我不想要。这是我的
HTML
文件代码：

<div id="about" *ngFor="let Review of Reviews" class="p-24" fxLayout="row wrap">
            <mat-card style="padding-bottom: 60px;" class="example-card">
                <mat-card-header>
                  <div mat-card-avatar class="example-header-image"></div>
                  <mat-card-title>{{ Review.patient.full_name }}</mat-card-title>
                  <mat-card-subtitle>{{ Review.timestamp }}</mat-card-subtitle>
                </mat-card-header>
                <div class="rating">
                    Overall Rating : 
                    <ngb-rating [rate]="Review.rating"></ngb-rating>
                </div>
                <mat-card-content>
                  <p>
                    {{ Review.review }}
                  </p>
                </mat-card-content>
                <mat-form-field class="example-full-width">
                    <textarea disabled matInput placeholder="Add your comment"></textarea>
                  </mat-form-field>
                  <mat-card-actions class="card-actions">
                  <button class="respond" mat-button>Respond</button>
                </mat-card-actions>
              </mat-card>
        </div>
我还在我的
module.ts
文件中添加了
NgbModule
。

虽然我使用个人代码进行这些类型的评估，但我无法真正找出错误所在，如下所示：

html:

  <div class="row align-items-center">
    <div class="col-md-12">
      <div class="rate">
        <input type="radio" id="star5" name="Rating" formControlName="Rating" value="5" />
        <label for="star5" title="5 estrelas"></label>
        <input type="radio" id="star4" name="Rating" formControlName="Rating" value="4" />
        <label for="star4" title="4 estrelas"></label>
        <input type="radio" id="star3" name="Rating" formControlName="Rating" value="3" />
        <label for="star3" title="3 estrelas"></label>
        <input type="radio" id="star2" name="Rating" formControlName="Rating" value="2" />
        <label for="star2" title="2 estrelas"></label>
        <input type="radio" id="star1" name="Rating" formControlName="Rating" value="1" />
        <label for="star1" title="1 estrela"></label>
      </div>
    </div>
  </div>
然后，您可以检索这些值并在ts中使用它们，例如，我在ngForm中使用这些值，然后将其提交给一个服务，并将其传递给我的API。

虽然我使用个人代码进行这些类型的评估，但我无法真正找出错误所在，如下所示：

html:

  <div class="row align-items-center">
    <div class="col-md-12">
      <div class="rate">
        <input type="radio" id="star5" name="Rating" formControlName="Rating" value="5" />
        <label for="star5" title="5 estrelas"></label>
        <input type="radio" id="star4" name="Rating" formControlName="Rating" value="4" />
        <label for="star4" title="4 estrelas"></label>
        <input type="radio" id="star3" name="Rating" formControlName="Rating" value="3" />
        <label for="star3" title="3 estrelas"></label>
        <input type="radio" id="star2" name="Rating" formControlName="Rating" value="2" />
        <label for="star2" title="2 estrelas"></label>
        <input type="radio" id="star1" name="Rating" formControlName="Rating" value="1" />
        <label for="star1" title="1 estrela"></label>
      </div>
    </div>
  </div>
然后，您可以检索这些值并在ts中使用它们，例如，我在ngForm中使用这些值，然后将其提交给一个服务，并将其传递给我的API。

看起来您没有安装该库，它是随附的。您可以查看一下当缺少引导时会发生什么：文本
（*）
显示在每个评级星的旁边，因为
sr only
类（对于屏幕阅读器）的样式未应用

在中，将安装引导库，并以
样式导入CSS。CSS
：

@import '~bootstrap/dist/css/bootstrap.min.css';
因此，只应用
sr
类的样式，隐藏不需要的星号和括号

如果使用Angular CLI，可以按照中的建议在
Angular.json
中导入引导CSS。请注意，使用ng引导时不需要
JQuery
和
popper.js
，如中所述

另一种方法是从
index.html
中的CDN导入引导CSS。该方法在ng引导文档中提供的中使用：

<head>
  ...
  <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
看起来您没有安装库，该库已安装。您可以查看一下当缺少引导时会发生什么：文本
（*）
显示在每个评级星的旁边，因为
sr only
类（对于屏幕阅读器）的样式未应用

在中，将安装引导库，并以
样式导入CSS。CSS
：

@import '~bootstrap/dist/css/bootstrap.min.css';
因此，只应用
sr
类的样式，隐藏不需要的星号和括号

如果使用Angular CLI，可以按照中的建议在
Angular.json
中导入引导CSS。请注意，使用ng引导时不需要
JQuery
和
popper.js
，如中所述

另一种方法是从
index.html
中的CDN导入引导CSS。该方法在ng引导文档中提供的中使用：

<head>
  ...
  <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
您应该检查item inspector.Nope中是否有错误。很清楚！显示要查看的所有代码。显示了两个文件。冲突必须在css中。您应该检查item inspector.Nope中是否有错误。很清楚！向我们显示所有要查看的代码。显示了两个文件。冲突一定在css中。如果我必须使用自定义
css
，
单选按钮
或
mat图标
，我会更早完成。我只是在使用一个角度模块，它在stackblitz上显示得非常好，但是同样的代码也可以工作，但是在星星之间显示的是
（*）
。我想在不使用任何额外的东西的情况下解决这个问题。在这种情况下，我看不出问题所在，如果它在stackblitz中工作，它应该在您的本地实现中工作，它可能与您的配置有关，检查应用模块，导入，看看您的模块是否正确安装，诸如此类的事情。您还可以尝试查看是否有任何控制台错误或警告，这会有所帮助。无控制台错误、无模块导入错误和无警告。这就是问题所在。如果我必须使用自定义的
CSS
，
单选按钮
或
mat图标
，我会更早完成。我只是在使用一个角度模块，它在stackblitz上显示得非常好，但是同样的代码也可以工作，但是在星星之间显示的是
（*）
。我想在不使用任何额外的东西的情况下解决这个问题。在这种情况下，我看不出问题所在，如果它在stackblitz中工作，它应该在您的本地实现中工作，它可能与您的配置有关，检查应用模块，导入，看看您的模块是否正确安装，诸如此类的事情。您还可以尝试查看是否有任何控制台错误或警告，这会有所帮助。无控制台错误、无模块导入错误和无警告。这就是问题所在。它解决了问题，但由于在我的html文件中添加了CDN链接，它几乎破坏了我的整个设计。我更新了答案，为您可以添加到应用程序中的特定CSS提供了建议，与其导入整个引导CSW，为什么它不支持十进制值？您可以查看ng引导文档。它展示了如何实现十进制支持。它解决了问题，但由于在html文件中添加了CDN链接，它几乎破坏了我的整个设计。我更新了答案，建议您可以添加到应用程序中的特定CSS，与其导入整个引导CSW，为什么它不支持十进制值？您可以查看ng引导文档。它展示了如何实现十进制支持。