小编Ben*_*lly的帖子

我有一个angular material linear stepper单独的angular component包含一个form需要的步骤validation

验证只是不起作用.我可以在不填写表格的情况下进入下一步.

为了说明我的意思,我在stackblitz上创建了一个浓缩版本.

要看的主要内容(我认为)是 create-profile.component.html

<mat-horizontal-stepper linear #stepper>
    <mat-step [stepControl]="frmStepOne">
        <ng-template matStepLabel>Step One Details</ng-template>
        <step-one-component></step-one-component>
    </mat-step>
    <mat-step [stepControl]="frmStepTwo">
        <ng-template matStepLabel>Step Two Details</ng-template>
        <step-two-component></step-two-component>
    </mat-step>
    <mat-step [stepControl]="frmStepThree">
        <ng-template matStepLabel>Step Three Details</ng-template>
        <step-three-component></step-three-component>
    </mat-step>
</mat-horizontal-stepper>

每一个 step-X-component

这是stackblitz. https://stackblitz.com/edit/angular-vpoj5j

我有一张卡片里面有一堆文字.其中一些是冗长的,它被强制到下一行,像这样,

我希望文本保持在一行,如果需要工具提示,则成为省略号.就像'拒绝了......'等

我已经使用flex和angular-material来设置它.

我尝试过的事情:

设置以下css属性:

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

这将使文本不再溢出,但不应用省略号.

这是HTML

<div *ngIf="profile" fxLayout="row" style="justify-content: space-evenly;">
......
 <div fxLayout="column" style="flex-basis: 75%; margin-right: 10px;">
        <mat-card class="card-info" style="flex: 1.5;">
            <div class="mat-card-header-text">Personal Information</div>
            <mat-card-content class="flex-and-justify-between">
                <div fxLayout="column" style="padding: 5px;">
                    <label class="info-heading">Date of Birth</label>
                    <label>{{profile.dateOfBirth | date }}</label>
                    <label class="info-heading info-heading-padded">Sexuality</label>
                    <label>{{profile.sexuality.value}}</label>
                    <label class="info-heading info-heading-padded">Previous Offender</label>
                    <label>{{profile.previousOffender}}</label>
                </div>

                <div fxLayout="column">
                    <label class="info-heading">Gender</label>
                    <label>{{profile.gender}}</label>
                    <label class="info-heading info-heading-padded">Gender Identity</label>
                    <label>{{profile.genderIdentity.value}}</label>
                    <label class="info-heading info-heading-padded">Date of First Visit</label>
                    <label>22/01/2018</label>
                </div>
                <div fxLayout="column">
                    <label class="info-heading">Postcode</label>
                    <label>{{profile.postcode}}</label>
                    <label …

我在使用cors时遇到了一些麻烦。我设置为server side：

  app.UseCors(builder => builder.WithOrigins("http://localhost:4200/").AllowAnyHeader());

在里面configure的方法startup类

当点击我的Web API时，它将返回数据。

但是，问题似乎出在Angular上，因为出现以下错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

这是我的角度网络API调用

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';;


@Injectable()
export class ProfileService {

    private baseUrl = 'api/profile/';

    constructor(private http: HttpClient) { }

    getLookups(step: number) {
        return this.http.get('http://localhost:51658/' + this.baseUrl + 'lookups/' + step)
    }

}

我有一个angular form这form是两个angular material inputs

文档中有一个属性指出您可以使标签始终浮动，因此我尝试复制它，但由于某种原因它不起作用。

这是 HTML

<form *ngIf="frmNotes" [formGroup]="frmNotes">
                <mat-form-field [floatLabel]="always" style="width: 100%">
                    <input matInput placeholder="Subject" formControlName="subject" [(ngModel)]="note.subject">
                </mat-form-field>
                <mat-form-field [floatLabel]="always" style="width: 100%;">
                    <textarea formControlName="note" matInput placeholder="Write a note.." [(ngModel)]="note.value"></textarea>
                </mat-form-field>
            </form>

这是TS

import { Component } from "@angular/core";
import { ActivatedRoute } from '@angular/router';
import { ProfileService } from "../../services/profile-service";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

@Component({
    selector: 'note-component',
    templateUrl: 'note.component.html',
    styleUrls: ['./note.component.css']
})

export class NoteComponent {
    notes: any;
    frmNotes: …

是否可以在 .net 核心项目中使用在 .net 框架中编写的 nuget 包？

由于我尝试使用将 .net 框架项目中的一个类注入到 .net 核心项目中，但它会阻止任何请求通过控制器

我想知道一种以相同的样式来验证所需复选框的方法，即角材料处理其他控件的验证-在表单提交时，除非触摸，否则控件显示为红色。

我想可以这样做，ng-style但是我想不出一种方法来检查表单是否已提交

这是HTML的代码段

 <form [formGroup]="frmFinish" name="frmFinish">
        <mat-checkbox required formControlName="check1">Discussed Confidentiality and Information Sharing with Service User</mat-checkbox>
        <mat-checkbox required formControlName="check2">Discussed Disposal and Storage of Injecting Equipment and Substances</mat-checkbox>
        <mat-checkbox required formControlName="check3">Discussed Overdose Risk and Prevention</mat-checkbox>

        <mat-form-field>
            <textarea formControlName="note" [(ngModel)]="stepFive.note" matInput placeholder="Any Additional Notes" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5"></textarea>
            <mat-hint align="end">This will be added to the profiles note's</mat-hint>
        </mat-form-field>

        <mat-card-actions>
            <button mat-raised-button type="button" class="nav-btn pull-right" (click)="fillForm()" style="background: red">Fill Form</button>
            <button mat-raised-button class="nav-btn pull-right" style="margin-left:5px;" (click)="createProfile()" type="submit">Finish</button>
            <button mat-raised-button matStepperPrevious class="nav-btn pull-right">Previous</button>
        </mat-card-actions> …