我在 Angular 7 中实现了一个动态生成的 html 表。我还实现了一种切换模式，使用户能够在编辑模式和只读模式之间切换。单击编辑通过显示相应的控件使单元格可编辑。目前我面临的问题是点击编辑按钮会在很大程度上扩展单元格。我需要在任何一种模式下都有固定的宽度。目前，如果您看到 CSS，我已将 min-width 设置为 td 并将 th 设置为 250px。我尝试了 width 和 max-width 属性，但没有用。
只读模式
编辑模式
html组件
<style>
th,
td {
padding: 7px;
min-width: 250px;
}
.btn {}
.tableItem {
text-align: center;
border-left: solid 1px lightgrey;
border-top: solid 1px lightgrey;
border-right: solid 1px lightgrey;
border-bottom: solid 1px lightgrey;
}
.rowItem:hover {
background-color: #f5f7f7;
}
label {
margin-left: 0.5rem;
vertical-align: middle
}
.panel-heading {
color: white;
background-color: #F59850;
border-color: #ddd;
overflow: hidden;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.panel-heading .left-label {
display: inline-block;
padding-top: 5px !important;
}
.scrollClass {
overflow-x: scroll;
display: grid;
}
.panel-heading label {
margin-bottom: 0px !important;
}
</style>
<div>
<input type="checkbox" id="chk" style="width: 13px; height: 13px;" checked="checked"
(click)="isInvestedSelected($event)" />
<label for="chkInvested">Invested</label>
</div>
<div class="card scrollClass">
<div class="card-header panel-heading">
<span class="left-label" style="font-size: 18px; font-weight: bold; ">Legal Fund Classes</span>
<div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
<!-- <label style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"> <i
data-bind="visible: true" class="fa fa-plus-square"></i><input type="checkbox" class="hidden" /> Add
Class</label> -->
<button style="text-align: center; vertical-align:middle" class="btn btn-default pull-right"
(click)="openFundClassModal()"> <i data-bind="visible: true" class="fa fa-plus-square"></i> Add
Class</button>
</div>
</div>
<div *ngIf="LegalFundClasses && LegalFundClasses.LegalFundClassDetailsViewModel && ColumnNames">
<table class="fundClassesTable table-striped">
<tr *ngFor="let c of ColumnNames">
<th class="tableItem bold">{{ c }}</th>
<ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel; let i=index">
<td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
<td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
<td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
<td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
<td class="tableItem" *ngIf="c == ColumnNames[4]">
<div *ngIf="EditMode[f.Id]">
<button type="button" class="btn btn-default btn" style="float: left;"
(click)="reviewClicked(f.Id,1)">Review Terms</button>
{{reviewTerm}}
</div>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[5] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[6]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.CurrencyId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.Currencies"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[7]" class="tableItem"> {{f.ManagerStrategyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[7]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.ManagerStrategyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.ManagerStrategies" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[8]" class="tableItem"> {{f.OtherCurrencyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[8]" class="tableItem">
<kendo-multiselect [data]="LegalFundClasses.Currencies" style="width:100%; height: 29.5px;" [(ngModel)]="f.OtherCurrencyName" [textField]="'Name'"
[valueField]="'Id'" [autoClose]="false">
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<input type="checkbox" class="k-checkbox" [checked]="isItemSelected(dataItem.Name)">
<label class="k-checkbox-label">{{ dataItem.Name }}</label>
</ng-template>
</kendo-multiselect>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[9]" class="tableItem"> {{f.SubVotingName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[9]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SubVotingId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqVoting"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[10]" class="tableItem"> {{f.SubHotIssueName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[10]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SubHotIssueId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqHotIssue"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[11] && i<1" ></td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[12] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[13]" class="tableItem">{{f.RedsFrqncyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[13]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.RedsFrqncyId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqRedsFrequency"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[14]" class="tableItem">{{f.RedsNoticeDays}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[14]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.RedsNoticeDays" style="width: 100%; height: 29.5px;" > -->
<kendo-numerictextbox [(ngModel)]="f.RedsNoticeDays" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[15]" class="tableItem">{{f.NoticeTypeOfDaysName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[15]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.NoticeTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[16] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[17]" class="tableItem">{{f.LockupTypeName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[17]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.LockupTypeId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqLockupType"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[18]" class="tableItem">{{f.HardDurationMonthsName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[18]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HardDurationMonthsId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqDurationMonths" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[19]" class="tableItem">{{f.SoftDurationMonthsName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[19]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.SoftDurationMonthsId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqDurationMonths" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[20]" class="tableItem">{{f.LockupFees0To12Pct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[20]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees0To12Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees0To12Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[21]" class="tableItem">{{f.LockupFees12To24Pct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[21]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees12To24Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees12To24Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[22]" class="tableItem">{{f.LockupFees24To36Pct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[22]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.LockupFees24To36Pct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.LockupFees24To36Pct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[23]" class="tableItem">{{f.WebfolioRedsFee}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[23]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.WebfolioRedsFee" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.WebfolioRedsFee" style="width:100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[24]" class="tableItem">{{f.LockupComments}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[24]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.LockupComments" style="width: 100%; height: 29.5px;" />
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[25] && i<1"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[26]" class="tableItem">
{{f.ApplyGateDecliningBalance === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[26]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.ApplyGateDecliningBalance}}"
style="width: 13px; height: 13px;" /> Yes </label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[27]" class="tableItem">{{f.GateInvestorPct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[27]" class="tableItem"><input kendoTextBox [(ngModel)]="f.GateInvestorPct"
style="width: 100%; height: 29.5px;" /></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[28]" class="tableItem">{{f.GateSourceName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[28]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.GateSourceId" [defaultItem]="defaultItem"
class="form-control form-control-sm" [data]="LegalFundClasses.LiqGateSource"
[filterable]="false" textField="Name" [valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[29]" class="tableItem">{{f.GateFundClassPct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[29]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.GateFundClassPct" style="width:100%; height: 29.5px;" />
</td>
<td class="tableItem" *ngIf="c == ColumnNames[30]"></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[31]" class="tableItem">{{f.IntialProceeds}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[31]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.IntialProceeds" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[32]" class="tableItem">{{f.PaymentInDays}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[32]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.PaymentInDays" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[33]" class="tableItem">{{f.PaymentTypeOfDaysName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[33]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.PaymentTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td class="tableItem" *ngIf="c == ColumnNames[34]" ></td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[35]" class="tableItem">{{f.HoldbackPercentage}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[35]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.HoldbackPercentage" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[36]" class="tableItem">{{f.HoldbackPayment}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[36]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.HoldbackPayment" style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[37]" class="tableItem">{{f.HoldbackTypeOfDaysName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[37]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HoldbackTypeOfDaysId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqTypeOfDays" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td colspan="7" class="tableItem" *ngIf="c == ColumnNames[38] && i<1"></td>
<td class="tableItem" *ngIf="c == ColumnNames[39]">
<button type="button" class="btn btn-default btn" style="float: left;"
(click)="reviewClicked(f.value.Id,2)">Review Fees</button>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[40]" class="tableItem">{{f.ManagementFeeRate}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[40]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.ManagementFeeRate" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.ManagementFeeRate" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[41]" class="tableItem">{{f.IncentiveFeeRate}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[41]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.IncentiveFeeRate" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.IncentiveFeeRate" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[42]" class="tableItem">{{f.RealizationFrequencyName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[42]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.RealizationFrequencyId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqFrequencys" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[43]" class="tableItem">{{f.HighWaterMarkName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[43]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HighWaterMarkId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHighWaterMarks" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[44]" class="tableItem">{{f.HurdleRate === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[44]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.HurdleRate}}" style="width: 13px; height: 13px;" /> Yes
</label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[45]" class="tableItem">{{f.HurdleRateBasisName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[45]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HurdleRateBasisId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHurdleRateBasis" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[46]" class="tableItem">{{f.HurdleRatePct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[46]" class="tableItem" style="width:100%">
<kendo-numerictextbox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
<!-- <input kendoTextBox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;" /> -->
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[47]" class="tableItem">{{f.HurdleRateIndexName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[47]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.HurdleRateIndexId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.LiqHurdleRateIndex" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[48]" class="tableItem">{{f.PreferredReturnRatePct}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[48]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.HurdleRatePct" style="width: 100%; height: 29.5px;" /> -->
<kendo-numerictextbox [(ngModel)]="f.PreferredReturnRatePct" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[49]" class="tableItem">{{f.GpCatchUp}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[49]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.GpCatchUp" style="width:100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[50]" class="tableItem">{{f.PrefferedReturnComments}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[50]" class="tableItem" style="width:100%">
<input kendoTextBox [(ngModel)]="f.PrefferedReturnComments"
style="width: 100%; height: 29.5px;" />
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[51]" class="tableItem">{{f.Clawback === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[51]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.Clawback}}" style="width: 13px; height: 13px;" /> Yes
</label>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[52]" class="tableItem">{{f.ClawbackPercentage}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[52]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.ClawbackPercentage" style="width: 100%; height: 29.5px;" /> -->
<kendo-numerictextbox [(ngModel)]="f.ClawbackPercentage" style="width: 100%; height: 29.5px;"></kendo-numerictextbox>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[53]" class="tableItem">{{f.AssetFeeDiscountTypeName}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[53]" class="tableItem">
<kendo-dropdownlist style="width: 100%; height: 29.5px;" [(ngModel)]="f.AssetFeeDiscountTypeId"
[defaultItem]="defaultItem" class="form-control form-control-sm"
[data]="LegalFundClasses.FeeDicountTypes" [filterable]="false" textField="Name"
[valuePrimitive]="true" valueField="Id">
</kendo-dropdownlist>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[54]" class="tableItem">{{f.FeeComments}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[54]" class="tableItem" style="width:100%">
<!-- <input kendoTextBox [(ngModel)]="f.FeeComments" style="width: 100%; height: 29.5px;" /> -->
<textarea kendoTextArea [(ngModel)]="f.FeeComments" style="width: 100%; height:200px;" ></textarea>
</td>
<td *ngIf="!EditMode[f.Id] && c == ColumnNames[55]" class="tableItem">{{f.FeeReductionsNegotiated === 'true' ? 'Yes' : 'No'}}</td>
<td *ngIf="EditMode[f.Id] && c == ColumnNames[55]" class="tableItem">
<label style="font-size: 13px;font-weight: normal;cursor: pointer">
<input type="checkbox" value="{{f.FeeReductionsNegotiated}}"
style="width: 13px; height: 13px;" /> Yes </label>
</td>
<td class="tableItem" *ngIf="c == ColumnNames[56]">
<button *ngIf="!EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-4"
(click)="buttonClicked(f.Id)">Edit</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="Update(f.Id)">Save</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="Delete(f.Id)">Delete</button>
<button *ngIf="EditMode[f.Id]" type="button" class="btn btn-primary btn mr-1 col-sm-3"
(click)="buttonClicked(f.Id)">Cancel</button>
</td>
</ng-container>
</tr>
</table>
</div>
</div>
最佳答案
是的，pindev 是正确的，您只需在可编辑行中设置您的输入样式。我会在单击编辑时向受影响的表行添加一个类。然后你可以把它放到你的 css 文件中:
.yourExtraClassForEditableLines input {
// your style goes here
}
问候毒药
关于html - 在只读模式和编辑模式之间切换时表格列宽发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56297004/
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案 是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee
我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行