Question

这是输入：

scheduleInput = { schedulefor: "weekdays" , weekdays: "" , days:""}

这是TS文件

onChangeCheckWeek(week:any ,  isChecked: boolean) {
  if (isChecked) {
    this.checkAll = false;
    this.scheduleInput.weekdays= this.scheduleInput.weekdays + week; 
    // The weekdays are stored in this.scheduleInput.weekdays and week is having the newly slected checkbox
    week.split(/[ ,]+/);
  } else {
    this.checkAll = false;
    this.selectAllWeekDays= false;
  }
}

这是HTML：

<div class="Schedule container-fluid" *ngIf="scheduleInput.schedulefor == 'weekdays'">
  <div class="my-info-1 row weekday">
    <h4 class="mgtop-15">
      Weekly :
    </h4>
  </div>
  <div class="row">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0 warning">
      <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAll" (change)="onChangeCheckAll($event.target.checked)" [(ngModel)]="selectAllWeekDays">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span>
      Select All
    </label></div>
    <div class="row mgtop-5">
     <div class="col-sm-4 ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input"  [checked]="checkAllWeek" (change)="onChangeCheckWeek('Monday', $event.target.checked)"   [value]="Monday" >
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Monday
        </label>
      </div>
      <div class="col-sm-4">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAllWeek" (change)="onChangeCheckWeek('Tuesday', $event.target.checked)" [value]="Tuesday"  >
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Tuesday
        </label>
      </div>
      <div class="col-sm-4  ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAllWeek" (change)="onChangeCheckWeek('Wednesday', $event.target.checked)" [value]="Wednesday">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Wednesday
        </label>
      </div>
    </div>
    <div class="row mgtop-5">
      <div class="col-sm-4  ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAllWeek" (change)="onChangeCheckWeek('Thursday', $event.target.checked)" [value]="Thursday">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Thursday
        </label>
      </div>
      <div class="col-sm-4  ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
         <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAllWeek" (change)="onChangeCheckWeek('Friday', $event.target.checked)" [value]="Friday" >
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Friday
        </label>
      </div>
      <div class="col-sm-4 ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input"  [checked]="checkAllWeek" (change)="onChangeCheckWeek('Saturday', $event.target.checked)"  [value]="Saturday">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description"></span>
            Saturday
          </label>
        </div>
      </div>
      <div class="row mgtop-5">
        <div class="col-sm-4 ">
          <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
            <input type="checkbox" id="rem"  class="custom-control-input"  [checked]="checkAllWeek" (change)="onChangeCheckWeek('Sunday' , $event.target.checked)"  [value]="Sunday">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description"></span>
            Sunday
          </label>
        </div>
      <div class="col-sm-8 mgtop-5"></div>
    </div>
  </div>

当我在检查了周中存储的复选框后检查控制台中的工作日时，它显示为;

MondayTuesdayWednesday....

我希望它显示为

Monday, Tuesday, Wednesday...

即使首先选择星期六而在此之后选择其他工作日，我也希望它以相同的顺序显示。非常感谢您的帮助。

Answer 1

您可以在当前结果上使用RegEx /[A-Z][a-z]+/g来拆分大写字母，如下所示：

＆＃13;

var days = 'MondayTuesdayWednesday'
days = days.match(/[A-Z][a-z]+/g).join(', ');
console.log(days);

＆＃13;

Answer 2

这样可以解决问题：

var week="MondayTuesdayWednesdayThursdayFridaySaturdaySunday";
var str=week.match(/[A-Z]*[^A-Z]+/g).join(', ');
console.log(str);

用javascript中的逗号分隔元素

2 个答案: